Vue.js如何在一个页面调用另一个同级页面的方法
使用场景:
页面分为header、home、footer三部分,需要在home中调用header中的方法,这两个没有相互引入
官方给出方法:
需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关系,看了一下vue的API发现可以用这个方法实现。
https://cn.vuejs.org/v2/api/#vm-on
在项目中实现:
1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。
建立 util.js 中转站文件(任意位置,我是在/assets/js/util.js)
import Vue from 'vue'
export default new Vue
2.分别在两个页面引入该文件(注意路径)
import Utils from '../../assets/js/util.js';
3.调用方代码
methods: {
functionA() {
Utils.$emit('demo','msg');
}
}
4.被调用方代码

mounted(){
var that = this;
Utils.$on('demo', function (msg) {
console.log(msg);
that.functionB();
})
},
methods: {
functionB() {
...
}
}

Vue.js如何在一个页面调用另一个同级页面的方法的更多相关文章
- 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 在JSP页面中调用另一个JSP页面中的变量
在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...
- 创建Vue.js对象:我的第一个Vue.js输出信息
<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...
- Js文件函数中调用另一个Js文件函数的方法
在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...
- vue.js 中使用(...)运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- 我与PHP,ULM和Vue.js不得不说的故事(一个放荡不羁与一个神神秘秘一个似曾相识,从入门到放弃记录第二章)
·关于UML(git) 究竟是命运在茫茫语言之中遇到了你,还是我的魅力让你向我奔涌而来.好吧都不是,我俩就像古代包办婚姻,被专业牢牢的绑在一起了,既然都是一条绳上的蚂蚱.我我们应该能体谅彼此的不容易, ...
- 一个jsp页面引入另一个jsp页面的三种方式 及静态引入和动态引入的区别
转载下, 转载自:http://blog.csdn.net/fn_2015/article/details/70311495 1.第一种:jstl import <c:import url=& ...
随机推荐
- Data Center手册(4):设计
基础架构 拓扑图 Switching Path L3 routing at aggregation layer L2 switching at access layer L3 switch融合了三种功 ...
- [Swift]LeetCode335. 路径交叉 | Self Crossing
You are given an array x of n positive numbers. You start at point (0,0) and moves x[0] metres to th ...
- [Swift]LeetCode641. 设计循环双端队列 | Design Circular Deque
Design your implementation of the circular double-ended queue (deque). Your implementation should su ...
- [Swift]LeetCode1017. 负二进制转换 | Convert to Base -2
Given a number N, return a string consisting of "0"s and "1"s that represents it ...
- python批量启动多线程
还未了解多线程的请查看博文 python3多线程趣味详解 python3多线程趣味详解 只是介绍了 python 多线程的使用,对于批量启动线程来说有些不适用,于是出现如下方法: 建立一个线程池,并将 ...
- 我要曝光!CDN 省钱大法!
七夕节刚过去,小明却特别郁闷,因为七夕当天,他错过了和远在北京的女神表白的机会.事情的经过是怎样的呢?为了在七夕当天送给自己女神一件礼物,小明在某购物网站上花重金购买了特别的礼物,礼物是从广东发送,结 ...
- HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!
前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...
- log4cplus使用(二)-自定义日志等级
log4cplus支持用户自定义日志等级,操作也比较简单,使用之前贴如下宏定义 #define LOG4CPLUS_MACRO_CREASH_LOG_LEVEL(pred) LOG4CPLUS_UNL ...
- Python爬虫入门教程 26-100 知乎文章图片爬取器之二
1. 知乎文章图片爬取器之二博客背景 昨天写了知乎文章图片爬取器的一部分代码,针对知乎问题的答案json进行了数据抓取,博客中出现了部分写死的内容,今天把那部分信息调整完毕,并且将图片下载完善到代码中 ...
- C#3.0智能的编译器
智能的编译器 在C#3.0中,编译器变的越来越智能,我们不用提供给它完整的信息,仅需要提供必要的信息,编译器就可以进行推断为我们补全未提供的信息 自动实现的属性 在之前我们生成一个类时需要有一个字段, ...