父子组件传值的问题，前面已经讲过，不再叙述，这里来说一种非父子组件的传值。
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);
});
}
}
这样，就可以在第二个非父子关系的组件中，通过第三者bus.js来获取到第一个组件的value。
嗯，就酱~
原文：https://www.cnblogs.com/jin-zhe/p/9291071.html