Vue 組件通訊之 Bus

關於組件通訊我相信小夥伴們確定也都很熟悉，就很少說了，對組件通訊還不熟悉的小夥伴移步這裏。
在vue2.0中 $dispatch 和 $broadcast 已經被棄用。官方文檔中給出的解釋是：

由於基於組件樹結構的事件流方式實在是讓人難以理解，而且在組件結構擴展的過程當中會變得愈來愈脆弱。這種事件方式確實不太好，咱們也不但願在之後讓開發者們太痛苦。而且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通訊問題。

官方推薦的狀態管理方案是 Vuex。不過若是項目不是很大，狀態管理也沒有很複雜的話，使用 Vuex 有種殺雞用牛刀的感受，固然，這也是要根據本身的需求來的，只是建議。

vue官方文檔中有這樣一個定義：非父子組件的通訊，內容不多，以下：

其實關於這個非父子組件通訊的demo仍是有的，它藏在了$dispatch 和 $broadcast的遷移文檔中，有興趣的小夥伴能夠點擊進去查看。文檔中的建議就是：

對於$dispatch 和 $broadcast最簡單的升級方式就是：經過使用事件中心，容許組件自由交流，不管組件處於組件樹的哪一層。因爲 Vue 實例實現了一個事件分發接口，你能夠經過實例化一個空的 Vue 實例來實現這個目的。

這個集中式的事件中間件就是 Bus。我習慣將bus定義到全局：

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);
複製代碼

而後在組件中，可使用$emit， $on， $off 分別來分發、監聽、取消監聽事件：

分發事件的組件

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是傳遞的參數
    //...
  }
}
複製代碼

監聽的組件

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //獲取傳遞的參數並進行操做
      //todo something
  })
},
// 最好在組件銷燬前
// 清除事件監聽
beforeDestroy () {
  this.$bus.$off('todoSth');
},
複製代碼

若是須要監聽多個組件，只須要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監聽
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
},
複製代碼

若是文章有錯誤或是有什麼疑問，歡迎在評論中交流。