1. 簡介

Vue 組件中常見的有：父子組件通信、兄弟組件通信。而父子組件通信就很簡單，父組件會(huì)通過 props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過 $emit 事件告訴父組件。

今天就來說說，如果兩個(gè)頁面沒有任何引入和被引入關(guān)系，該如何通信呢？

如果應(yīng)用程序不需要類似 Vuex 這樣的庫來處理組件之間的數(shù)據(jù)通信，就可以考慮 Vue 中的事件總線 ，即 eventBus 來通信。

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

2. 使用

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

vue-bus npm地址

vue-bus github地址

安裝及引入

npm install vue-bus --save

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

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

在組件中使用

假設(shè)有兩個(gè)Vue組件需要通信 ，在 A 組件的按鈕上面綁定了點(diǎn)擊事件發(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','我只會(huì)觸發(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);
    // 此偵聽器只會(huì)觸發(fā)一次
    this.$bus.once('doOnce', (txt) => { console.log(txt) });
  },
  // 組件銷毀時(shí)，移除EventBus事件監(jiān)聽
  beforeDestroy() {
    this.$bus.off('changeMsg', this.addTodo);
  },
}
</script>

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

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

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

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

總結(jié)

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

最新評(píng)論