使用场景:
页面分为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() { ... } }