vue2.0 非父子组件之间的单一事件通讯

前言
vue官网指出： 经过使用事件中心，容许组件自由交流，不管组件处于组件树的哪一层。因为 Vue 实例实现了一个事件分发接口，你能够经过实例化一个空的 Vue 实例来实现这个目的。

也就是说 非父子组件之间的通讯，必需要有公共的实例（能够是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通讯

---

1. 建立一个公共实例文件bus.js

#bus.js做为中央数据总线

import Vue from "vue";
export default new Vue();

1. 组件 foo.vue

#foo.vue

import Bus from '../bus.js';
export default {
  name: 'foo',
  data () {
    return {
      foo: 'Foo component',
      msg: 'this is foo data'
    }
  },
  mounted:function(){
    var _this=this;
    Bus.$on('add',function(msg){//监听bar组件的add事件
      _this.msg = msg ;
      console.log(_this.msg);
    });
  }
}

3.组件 bar.vue

#bar.vue

import Bus from '../bus.js';
export default {
  name: 'bar',
  data () {
    return {
      bar: 'Bar component',
      msg: 'this is bar data'
    }
  },
  methods:{
    add(){// 定义add方法，并将msg经过add传给foo组件
      Bus.$emit('add',this.msg);
      this.msg='';
    }
  }
}