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='';
    }
  }
}