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.vue

import 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.vue

import 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，备注：前端
希望对你有帮助，~溜了~