在vue1.0中，組件之間的通信主要通過(guò)vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來(lái)實(shí)現(xiàn)。然而在vue2.0中，已經(jīng)廢除了這種用法。

vuex加入后，對(duì)組件之間的通信有了更加清晰的操作，對(duì)于中大型的項(xiàng)目來(lái)說(shuō)，一開始就把vuex的使用計(jì)劃在內(nèi)是明智的選擇。

然而在一些小型的項(xiàng)目，或者說(shuō)像我這樣寫到一半才發(fā)現(xiàn)vue2.0用不了$.broadcast和$dispatch的人來(lái)說(shuō)，就需要一個(gè)比較便捷的解決方法。那么，eventBus的作用就體現(xiàn)出來(lái)了。

主要是現(xiàn)實(shí)途徑是在要相互通信的兄弟組件之中，都引入一個(gè)新的vue實(shí)例，然后通過(guò)分別調(diào)用這個(gè)實(shí)例的事件觸發(fā)和監(jiān)聽來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞。

這里來(lái)看一個(gè)簡(jiǎn)單的例子：

比如，我們這里有三個(gè)組件，main.vue、click.vue、show.vue。click和show是父組件main下的兄弟組件，而且click是通過(guò)v-for在父組件中遍歷在了多個(gè)列表項(xiàng)中。這里要實(shí)現(xiàn)，click組件中觸發(fā)點(diǎn)擊事件后，由show組件將點(diǎn)擊的是哪個(gè)dom元素console出來(lái)。

首先，我們給click組件添加點(diǎn)擊事件

??

想要在doClick()方法中，實(shí)現(xiàn)對(duì)show組件的通信，我們需要新建一個(gè)js文件，來(lái)創(chuàng)建出我們的eventBus，我們把它命名為bus.js

import?Vue?from?'vue';??

export?default?new?Vue();??

這樣我們就創(chuàng)建了一個(gè)新的vue實(shí)例。接下來(lái)我們?cè)赾lick組件和show組件中import它。

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

接下來(lái)，我們?cè)赿oClick方法中，來(lái)觸發(fā)一個(gè)事件：

methods:?{??

???addCart(event)?{??

Bus.$emit('getTarget',?event.target);???

???}??

}??

這里我們?cè)赾lick組件中每次點(diǎn)擊，都會(huì)在bus中觸發(fā)這個(gè)名為'getTarget'的事件，并將點(diǎn)擊事件的event.target順著事件傳遞出去。

接著，我們要在show組件中的created()鉤子中調(diào)用bus監(jiān)聽這個(gè)事件，并接收參數(shù)：

created()?{??

Bus.$on('getTarget',?target?=>?{??

????????????console.log(target);??

????????});??

??????}??

這樣，在每次click組件的點(diǎn)擊事件中，就會(huì)把event.target傳遞到show中，并console出來(lái)。

所以eventBus的使用還是非常便捷的，但是如果是中大型項(xiàng)目，通信比較復(fù)雜，還是建議大家直接使用vuex。

當(dāng)然也可以直接將Bus注入到Vue根對(duì)象中，

import Vue from 'vue'

const Bus =new Vue()

var app=new Vue({

? ? el:'#app'

? ? data:{

　　　　Bus

? ? }

})

在子組件中通過(guò)this.$root.Bus.on(),this.$root.Bus.emit()來(lái)調(diào)用