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