vue非父组件的通讯
Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值。
vue官网指出,可以使用一个空vue实例作为事件中央线!
也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的),才能使用 $emit
获取 $on
的数据参数,实现组件通信
这里举个例子来说明一下。
公共实例文件bus.js,作为公共数控中央总线
import Vue from "vue"; export default new Vue();
第一个组件 first.vue
import Bus from '../bus.js'; export default { name: 'first', data () { return { value: '我来自first.vue组件!' } }, methods:{ add(){// 定义add方法,并将msg通过txt传给second组件 Bus.$emit('txt',this.value); } } }
第二个组件second.vue
import Bus from '../bus.js'; export default { name: 'second', data () { return { } }, mounted:function(){ Bus.$on('txt',function(val){//监听first组件的txt事件 console.log(val); }); } }