vue2.0 .vue文件非父子组件传值问题

前一篇我们谈过这个问题，在上一篇中我们是在main.js中定义空的bus.大家如果自己写个简单的demo是可以实现的，但是在项目中如果有路由存在的话，则会失效！那么在有路由的情况下如何在非父子组件中传值呢？
首先我们还是得看官网的api;vue官网指出你可以使用一个空vue实例作为事件中央线！也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信
那么接下来我们可以创建一个公共实例文件bus.js

#bus.js作为中央数据总线import Vue from "vue";export default new Vue();

组件 second.vue

#second.vueimport Bus from '../bus.js';export default {  name: 'foo',  data () {    return {      foo: 'Foo component',      msg: 'I come from second'    }  },  mounted:function(){    var _this=this;    Bus.$on('txt',function(msg){//监听first组件的txt事件      _this.msg = msg ;      console.log(_this.msg);    });  }}

3.组件 first.vue

#first.vueimport Bus from '../bus.js';export default {  name: 'bar',  data () {    return {      msg: 'I come from first'    }  },  methods:{    add(){// 定义add方法，并将msg通过txt传给second组件      Bus.$emit('txt',this.msg);      this.msg='';    }  }}

希望对你有帮助，~~溜了~
欢迎加入前端交流群496522155，备注：前端
希望对你有帮助，~溜了~