1俐巴、需求背景
vue組件非常常見(jiàn)的有父子組件通信综芥，兄弟組件通信泰演。而父子組件通信就很簡(jiǎn)單飒房，父組件會(huì)通過(guò) props 向下傳數(shù)據(jù)給子組件搁凸，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過(guò) $emit 事件告訴父組件。今天就來(lái)說(shuō)說(shuō)如果兩個(gè)頁(yè)面沒(méi)有任何引入和被引入關(guān)系狠毯，該如何通信呢护糖？
如果咱們的應(yīng)用程序不需要類似Vuex這樣的庫(kù)來(lái)處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的 事件總線 嚼松，即 EventBus來(lái)通信嫡良。
2、EventBus的簡(jiǎn)介
EventBus 又稱為事件總線献酗。在Vue中可以使用 EventBus 來(lái)作為溝通橋梁的概念寝受，就像是所有組件共用相同的事件中心，可以向該中心注冊(cè)發(fā)送事件或接收事件罕偎，所以組件都可以上下平行地通知其他組件很澄，但也就是太方便所以若使用不慎，就會(huì)造成難以維護(hù)的“災(zāi)難”颜及，因此才需要更完善的Vuex作為狀態(tài)管理中心甩苛，將通知的概念上升到共享狀態(tài)層次。
3俏站、如何使用EventBus
一浪藻、初始化
首先需要?jiǎng)?chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽(tīng)它乾翔。我們可以通過(guò)兩種方式來(lái)處理爱葵。先來(lái)看第一種，新創(chuàng)建一個(gè) .js 文件反浓，比如 event-bus.js
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
實(shí)質(zhì)上EventBus是一個(gè)不具備 DOM 的組件萌丈，它具有的僅僅只是它實(shí)例方法而已，因此它非常的輕便雷则。
另外一種方式辆雾，可以直接在項(xiàng)目中的 main.js 初始化 EventBus :
// main.js
Vue.prototype.$EventBus = new Vue()
注意，這種方式初始化的EventBus是一個(gè)全局的事件總線月劈。稍后再來(lái)聊一聊全局的事件總線度迂。
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來(lái)你需要做到的就是在你的組件中加載它猜揪，并且調(diào)用同一個(gè)方法惭墓，就如你在父子組件中互相傳遞消息一樣。
二而姐、發(fā)送事件
假設(shè)你有兩個(gè)Vue頁(yè)面需要通信： A 和 B 腊凶，A頁(yè)面 在按鈕上面綁定了點(diǎn)擊事件，發(fā)送一則消息，想要通知 B頁(yè)面钧萍。
<!-- A.vue -->
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";//引入EventBus
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '來(lái)自A頁(yè)面的消息');
}
}
};
</script>
接下來(lái)褐缠，我們需要在 B頁(yè)面 中接收這則消息。
三风瘦、接收事件
<!-- IncrementCount.vue -->
<template>
<p>{{msg}}</p>
</template>
<script>
import {
EventBus
} from "../event-bus.js";
export default {
data(){
return {
msg: ''
}
},
mounted() {
EventBus.$on("aMsg", (msg) => {
// A發(fā)送來(lái)的消息
this.msg = msg;
});
}
};
</script>
同理我們也可以在 B頁(yè)面 向 A頁(yè)面 發(fā)送消息队魏。這里主要用到的兩個(gè)方法：
// 發(fā)送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 監(jiān)聽(tīng)接收消息
EventBus.$on(channel: string, callback(payload1,…))
前面提到過(guò)，如果使用不善万搔，EventBus會(huì)是一種災(zāi)難器躏，到底是什么樣的“災(zāi)難”呢？
大家都知道vue是單頁(yè)應(yīng)用蟹略，如果你在某一個(gè)頁(yè)面刷新了之后，與之相關(guān)的EventBus會(huì)被移除遏佣，這樣就導(dǎo)致業(yè)務(wù)走不下去挖炬。還要就是如果業(yè)務(wù)有反復(fù)操作的頁(yè)面，EventBus在監(jiān)聽(tīng)的時(shí)候就會(huì)觸發(fā)很多次状婶，也是一個(gè)非常大的隱患意敛。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系。通常會(huì)用到膛虫，在vue頁(yè)面銷毀時(shí)草姻，同時(shí)移除EventBus事件監(jiān)聽(tīng)。
四稍刀、移除事件監(jiān)聽(tīng)
如果想移除事件的監(jiān)聽(tīng)撩独，可以像下面這樣操作：
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
你也可以使用 EventBus.off() 來(lái)移除所有事件頻道综膀，不需要添加任何參數(shù) 。
上面就是 EventBus 的使用方法局齿，是不是很簡(jiǎn)單剧劝。上面的示例中我們也看到了，每次使用 EventBus 時(shí)都需要在各組件中引入 event-bus.js 抓歼。
但是事實(shí)上讥此，我們還可以通過(guò)別的方式，讓事情變得簡(jiǎn)單一些谣妻。那就是創(chuàng)建一個(gè)全局的 EventBus 萄喳。接下來(lái)的示例向大家演示如何在Vue項(xiàng)目中創(chuàng)建一個(gè)全局的 EventBus 。
全局EventBus
它的工作原理是發(fā)布/訂閱方法蹋半，通常稱為 Pub/Sub 取胎。
1、創(chuàng)建全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在這個(gè)特定的總線中使用兩個(gè)方法emit。一個(gè)用于創(chuàng)建發(fā)出的事件闻蛀，它就是
on：
var EventBus = new Vue();
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {
// ...
})
然后我們可以在某個(gè)Vue頁(yè)面使用this.emit("sendMsg", '我是web秀');，另一個(gè)Vue頁(yè)面使用
this.$bus.$on('updateMessage', function(value) {
console.log(value); // 我是web秀
})
同時(shí)也可以使用this.off('sendMsg')來(lái)移除事件監(jiān)聽(tīng)觉痛。
總結(jié)
本文主要通過(guò)簡(jiǎn)單的實(shí)例學(xué)習(xí)了Vue中有關(guān)于 EventBus 相關(guān)的知識(shí)點(diǎn)役衡。主要涉及了 EventBus 如何實(shí)例化，又是如何通過(guò) on 來(lái)接收頻道信號(hào)手蝎。最后簡(jiǎn)單介紹了如何創(chuàng)建全局的 EventBus 。從實(shí)例中我們可以了解到俐芯， EventBus 可以較好的實(shí)現(xiàn)兄弟組件之間的數(shù)據(jù)通訊棵介。
