vue2.0中eventBus實現兄弟組件通訊

我們知道，在vue中父子組件的通訊是通過props和自定義事件搞定的，簡單那的非父子組件通訊用bus（一個空的Vue實例），針對中大型的項目會選擇vuex，然而小項目的話，便捷的解決方案就是eventBus。

 

官網相關描述在：$dispatch和$broadcast替換  一節中。提到：

$dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。對於$dispatch 和 $broadcast最簡單的升級方式就是：通過使用事件中心，允許組件自由交流，無論組件處於組件樹的哪一層。由於 Vue 實例實現了一個事件分發接口，你可以通過實例化一個空的 Vue 實例來實現這個目的。組件中可以使用$emit,$on,$off分別來分發，監聽，取消監聽事件。但是對於復雜的情況，更推薦使用一個專門的狀態管理層如：Vuex。

 

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

簡單的例子：

參考：https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
我這里說個比較簡單的：

這里，A.vue是父組件，B.vue，C.vue是兄弟組件。在B中click后，C將點擊的DOM打印出來。
給click添加事件：

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

在公共方法common/js/bus.js里面：

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

這里創建了一個新的Vue的實例，接下來在B和C組件里面引入Bus；
然后在B里面進行觸發事件：

methods：{
     addCars(ev){
     Bus.$emit('getTarget',event.target);
     }
}

在C組件里面的created（）鈎子中調用Bus監聽這個事件，並接受參數：

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

 題外話：vuex是怎么實現的？

參考：https://segmentfault.com/q/1010000007491994