vue組件非常常見的有父子組件通信晤硕，兄弟組件通信挣柬。而父子組件通信就很簡單惕虑，父組件會通過 props 向下傳數(shù)據(jù)給子組件坟冲，當(dāng)子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。今天就來說說如果兩個頁面沒有任何引入和被引入關(guān)系溃蔫，該如何通信了
果咱們的應(yīng)用程序不需要類似Vuex這樣的庫來處理組件之間的數(shù)據(jù)通信健提，就可以考慮Vue中的 事件總線 ，即 EventBus來通信
EventBus又稱為事件總線伟叛。在Vue中可以使用 EventBus 來作為溝通橋梁的概念私痹，就像是所有組件共用相同的事件中心，可以向該中心注冊發(fā)送事件或接收事件痪伦，所以組件都可以上下平行地通知其他組件侄榴。
如何使用EventBus
1.初始化
首先需要創(chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽它网沾。我們可以通過兩種方式來處理癞蚕。先來看第一種，新創(chuàng)建一個 .js 文件辉哥，比如 event-bus.js
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
實質(zhì)上EventBus是一個不具備 DOM 的組件桦山，它具有的僅僅只是它實例方法而已，因此它非常的輕便
另外一種方式醋旦，可以直接在項目中的 main.js 初始化 EventBus
// main.js
Vue.prototype.$EventBus = new Vue()
這種方式初始化的
EventBus是一個 全局的事件總線 恒水。稍后再來聊一聊全局的事件總線
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來你需要做到的就是在你的組件中加載它饲齐，并且調(diào)用同一個方法钉凌，就如你在父子組件中互相傳遞消息一樣。
2. 發(fā)送事件
假設(shè)你有兩個Vue頁面需要通信： A 和 B 捂人，A頁面 在按鈕上面綁定了點擊事件御雕，發(fā)送一則消息，想通知 B頁面
<!-- A.vue -->
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '來自A頁面的消息');
}
}
};
</script>
接下來我們就要從B組件接受這則信息
<!-- 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ā)送來的消息
this.msg = msg;
});
}
};
</script>
同理我們也可以在 B頁面 向 A頁面 發(fā)送消息滥搭。這里主要用到的兩個方法：
// 發(fā)送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 監(jiān)聽接收消息
EventBus.$on(channel: string, callback(payload1,…))
前面提到過酸纲，如果使用不善，EventBus 會是一種災(zāi)難瑟匆，到底是什么樣的“災(zāi)難”了闽坡？大家都知道vue是單頁應(yīng)用，如果你在某一個頁面刷新了之后，與之相關(guān)的EventBus會被移除疾嗅，這樣就導(dǎo)致業(yè)務(wù)走不下去外厂。還要就是如果業(yè)務(wù)有反復(fù)操作的頁面，EventBus 在監(jiān)聽的時候就會觸發(fā)很多次宪迟，也是一個非常大的隱患酣衷。這時候我們就需要好好處理 EventBus 在項目中的關(guān)系。通常會用到次泽，在vue頁面銷毀時穿仪，同時移除EventBus事件監(jiān)聽
移除事件監(jiān)聽
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
你也可以使用EventBus.$off來移除應(yīng)用內(nèi)所有對此某個事件的監(jiān)聽∫饣纾或者直接調(diào)用EventBus.$off()來移除所有事件頻道啊片，不需要添加任何參數(shù) 。
上面就是 EventBus 的使用方法玖像，是不是很簡單紫谷。上面的示例中我們也看到了，每次使用 EventBus 時都需要在各組件中引入event-bus.js 捐寥。事實上笤昨，我們還可以通過別的方式，讓事情變得簡單一些握恳。那就是創(chuàng)建一個全局的EventBus瞒窒。接下來的示例向大家演示如何在Vue項目中創(chuàng)建一個全局的 EventBus
全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在這個特定的總線中使用兩個方法$on和$emit 。一個用于創(chuàng)建發(fā)出的事件乡洼，它就是$emit崇裁；另一個用于訂閱 $on
var
EventBus= new Vue();
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {
// ...
})
然后我們可以在某個Vue頁面使用
this.$bus.$emit("sendMsg", '我是web秀');，另一個Vue頁面使用
this.$bus.$on('updateMessage', function(value) {
console.log(value); // value我是web秀
})
同時也可以使用this.$bus.$off('sendMsg')來移除事件監(jiān)聽
本文主要通過簡單的實例學(xué)習(xí)了Vue中有關(guān)于 EventBus相關(guān)的知識點束昵。主要涉及了EventBus如何實例化拔稳，又是如何通過$emit發(fā)送頻道信號，又是如何通過 $on 來接收頻道信號锹雏。最后簡單介紹了如何創(chuàng)建全局的 EventBus巴比。從實例中我們可以了解到，EventBus 可以較好的實現(xiàn)兄弟組件之間的數(shù)據(jù)通訊礁遵。
