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出來。

注意：在使用完成以後，要註銷掉，不然會在其餘頁面重複調用；詳細參考：https://www.cnblogs.com/xiaochongchong/p/8127148.html

beforeDestroy () {
    bus.$off('select'，this.handle)
}

 

 

 

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