Vue組件通訊中eventBus的使用

在vue1.0中，組件之間的通訊主要經過vm.$dispatch沿着父鏈向上傳播和用vm.$broadcast向下廣播來實現。然而在vue2.0中，已經廢除了這種用法。

vuex加入後，對組件之間的通訊有了更加清晰的操做，對於中大型的項目來講，一開始就把vuex的使用計劃在內是明智的選擇。

然而在一些小型的項目，或者說像我這樣寫到一半才發現vue2.0用不了$.broadcast和$dispatch的人來講，就須要一個比較便捷的解決方法。那麼，eventBus的做用就體現出來了。

主要是現實途徑是在要相互通訊的兄弟組件之中，都引入一個新的vue實例，而後經過分別調用這個實例的事件觸發和監聽來實現通訊和參數傳遞。

這裏來看一個簡單的例子：

好比，咱們這裏有三個組件，main.vue、click.vue、show.vue。click和show是父組件main下的兄弟組件，並且click是經過v-for在父組件中遍歷在了多個列表項中。這裏要實現，click組件中觸發點擊事件後，由show組件將點擊的是哪一個dom元素console出來。

首先，咱們給click組件添加點擊事件

<div class="click" @click.stop.prevent="doClick($event)"></div>

想要在doClick()方法中，實現對show組件的通訊，咱們須要新建一個js文件，來建立出咱們的eventBus，咱們把它命名爲bus.js

import Vue from 'vue';  
export default new Vue();

這樣咱們就建立了一個新的vue實例。接下來咱們在click組件和show組件中import它。

import Bus from 'common/js/bus.js';

接下來，咱們在doClick方法中，來觸發一個事件：

methods: {  
   addCart(event) {  
   Bus.$emit('getTarget', event.target);   
   }  
}

這裏咱們在click組件中每次點擊，都會在bus中觸發這個名爲'getTarget'的事件，並將點擊事件的event.target順着事件傳遞出去。

接着，咱們要在show組件中的created()鉤子中調用bus監聽這個事件，並接收參數：

created() {  
        Bus.$on('getTarget', target => {  
            console.log(target);  
        });  
}

這樣，在每次click組件的點擊事件中，就會把event.target傳遞到show中，並console出來。

因此eventBus的使用仍是很是便捷的，可是若是是中大型項目，通訊比較複雜，仍是建議你們直接使用vuex。

來看一個實際例子：

咱們建立了一個selection.vue的下拉框組件，在layout.vue組件中使用了selection.vue組件，咱們要實現點擊layout.vue組件頁面的任意一處（除下拉框組件自己外），均可以將下拉框收起來。首先，新建了一個eventBus.js文件，在裏面新建了一個vue的實例賦值給const eventBus，在selection.vue和layout.vue中分別import eventBus from '../../eventBus'和import eventBus from '../eventBus'，則eventBus對於selection.vue和layout.vue就是一個全局的vue實例對象，而後經過分別調用eventBus這個實例的事件觸發$emit和事件監聽$on來實現通訊和參數傳遞。圖6，是爲了在一個頁面中，把selection.vue使用了至少兩次，則咱們點擊任意一個selection.vue的同時，要把其它的selection.vue給收起來，如圖7。

圖1：

圖2：

圖3：

圖4：

圖5：

圖6：

圖7：