Vue中的事件總線

導(dǎo)讀

在用Vue框架的時候，組件（component）是我們必不可以少創(chuàng)建的，組件既可以作為父組件，也可以作為子組件和兄弟組件。但如何讓它們之間互相通信呢？

大家用的比較多應(yīng)該就是父子組件之間的通信了，父組件可以通過 props 給子組件傳遞參數(shù)，子組件可以通過 $emit 事件告訴父組件該干嘛干嘛了。

那么如果要實現(xiàn)兄弟組件間的通信呢？兄弟組件基于同一個父組件，之前有一個比較傳統(tǒng)的做法，比如要實現(xiàn)A組件和B組件兩個兄弟組件的通信。

就是A組件通過 $emit 告訴它爹，我這邊ok了，然后父組件通過 watch 監(jiān)聽某個信息數(shù)據(jù)，信息數(shù)據(jù)發(fā)生變化了，那么可以告訴B組件去做后面的事情了，相當(dāng)于父組件做了個中間商。

聽起來是不是很麻煩，那么 事件總線（EventBus） 就能很好的處理這類情況。

EventBus簡介

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

如何創(chuàng)建EventBus

// main.jsVue.prototype.$bus = new Vue();

這種方式初始化的?EventBus?是一個全局的事件總線，里面是沒有聲明綁定的事件。

通過Vue的原型對象構(gòu)建的時間總線，那么我們直接可以在項目中用 this 來調(diào)用。

接著上面說的，我們要在A組件中，告訴B組件做一件事情，比如：吃飯。

利用EventBus發(fā)送事件

那么我們在A組件中綁定吃飯事件：

onConfirm() {???//發(fā)出事件???this.$bus.$emit('eating',?'吃飯啦');},

eating 是事件名稱，當(dāng)觸發(fā)了 onConfirm方法后，就可以發(fā)出事件。

接收事件

然后在B組件中掛載的注冊監(jiān)聽，當(dāng)A發(fā)出，B自然就能接收到了。

mounted() {????this.$bus.$on('eating',?value?=>?{????????console.log(value);?????});????//=>?'吃飯啦'},

銷毀事件

由于事件總線非常消耗資源，所以記得在組件中銷毀這些創(chuàng)建的事件。

我們在可以在組件的被銷毀之前去銷毀它。

beforeDestroy() {        this.$bus.$off('eating'); //銷毀事件    },

總結(jié)

本文主要通過簡單的實例學(xué)習(xí)了Vue中有關(guān)于?EventBus?相關(guān)的知識點。主要涉及了?EventBus?如何實例化，又是如何通過?$emit?發(fā)送事件，又是如何通過?$on?來接收事件和銷毀事件。從實例中我們可以了解到，?EventBus?可以較好的實現(xiàn)兄弟組件之間的數(shù)據(jù)通訊。

不必糾結(jié)于當(dāng)下，也不必太憂慮未來，當(dāng)你經(jīng)歷一些事情的時候，眼前的風(fēng)景已經(jīng)和從前不一樣了。

--《1Q84》