Vue中非父子组件传值的问题

今天在做项目的时候需要非父子组件之间进行传值，通过以下链接解决问题，进行记录下。

转自：https://www.cnblogs.com/jin-zhe/p/9291071.html

父子组件传值的问题，前面已经讲过，不再叙述，这里来说一种非父子组件的传值。

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);
    //注：这里如果进行push操作，需要根据自己的业务逻辑加if判断，否则会报错。
    if（val!=''）{
        this.arr.push(value)
      }
    });
  }
}

这样，就可以在第二个非父子关系的组件中，通过第三者bus.js来获取到第一个组件的value。

兄弟组件之间与父子组件之间的数据交互，两者相比较，兄弟组件之间的通信其实和子组件向父组件传值有些类似，其实他们的通信原理都是相同的，

例如子向父传值也是$emit和$on的形式，只是没有eventBus，但若我们仔细想想，此时父组件其实就充当了bus这个事件总线的角色。 

这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理，请自行到官网进行学习。