eventBus 又稱為事件總線。在 Vue 中可使用 eventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可向該中心注冊發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件。但也就是太方便所以若使用不慎，就會造成難以維護的“災(zāi)難”，因此才需要更完善的 Vuex 作為狀態(tài)管理中心，將通知的概念上升到共享狀態(tài)層次。

2. 使用

可以聲明一個全局變量來使用事件中心，但如果在使用 webpack 之類的模塊系統(tǒng)，這顯然不合適。
每次使用都手動 import 進來也很不方便，所以本文使用 vue-bus 插件。

vue-bus npm地址

vue-bus github地址

安裝及引入

npm install vue-bus --save

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝 vue-bus：

// main.js
import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

在組件中使用

假設(shè)有兩個Vue組件需要通信，在 A 組件的按鈕上面綁定了點擊事件發(fā)送一則消息，想通知 B 組件。

// A 組件
<template>
  <div class="wrap">
    <button @click="sendMsg">觸發(fā)</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Amsg:'我是來自A組件的信息',
    }
  },
  methods:{
    sendMsg(){
      this.$bus.emit('changeMsg', this.Amsg );
      this.$bus.emit('doOnce','我只會觸發(fā)一次');
    }
  },
}
</script>

// B 組件
<template>
  <div>
    <h3>{{Bmsg}}</h3>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Bmsg:'我是B組件',
    }
  },
  methods:{
    getMsg(msg){
      this.Bmsg = msg;
      console.log(msg);
    }
  },
  created(){
    /*
    * 接收事件
    * 這種寫法也體現(xiàn)了：A 組件調(diào)用 B 組件中的方法。如果只是傳遞數(shù)據(jù)，可參考如下簡化寫法：
    * this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg });
	*/ 
    this.$bus.on('changeMsg', this.getMsg);
    // 此偵聽器只會觸發(fā)一次
    this.$bus.once('doOnce', (txt) => { console.log(txt) });
  },
  // 組件銷毀時，移除EventBus事件監(jiān)聽
  beforeDestroy() {
    this.$bus.off('changeMsg', this.addTodo);
  },
}
</script>

當(dāng)我們點擊5次觸發(fā)按鈕時，效果如下：

補充：移除監(jiān)聽事件

為了避免在監(jiān)聽時，事件被反復(fù)觸發(fā)，通常需要在頁面銷毀時移除事件監(jiān)聽?；蛘咴陂_發(fā)過程中，由于熱更新，事件可能會被多次綁定監(jiān)聽，這時也需要移除事件監(jiān)聽。

//使用方式一定義時
this.$EventBus.$off('eventName');
//使用方式二定義時
EventBus.$off('eventName');

總結(jié)

eventBus 適合小項目、數(shù)據(jù)被更少組件使用的項目，對于中大型項目數(shù)據(jù)在很多組件之間使用的情況 eventBus 就不太適用了。eventBus 其實就是一個發(fā)布訂閱模式，利用 Vue 的自定義事件機制，在觸發(fā)的地方通過 $emit 向外發(fā)布一個事件，在需要監(jiān)聽的頁面，通過 $on 監(jiān)聽事件。

您可能感興趣的文章: