vue2.0s中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。