vue組件非常常見的有父子組件通信鸥鹉，兄弟組件通信撑帖。而父子組件通信就很簡單筐眷，父組件會通過 props 向下傳數(shù)據(jù)給子組件铐炫，當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件垒手。今天就來說說如果兩個頁面沒有任何引入和被引入關系，該如何通信倒信？
如果咱們的應用程序不需要類似Vuex這樣的庫來處理組件之間的數(shù)據(jù)通信科贬，就可以考慮Vue中的 事件總線 ，即 EventBus來通信鳖悠。
EventBus 又稱為事件總線榜掌。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心乘综，可以向該中心注冊發(fā)送事件或接收事件唐责，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎瘾带，就會造成難以維護的“災難”鼠哥，因此才需要更完善的Vuex作為狀態(tài)管理中心，將通知的概念上升到共享狀態(tài)層次看政。
前面提到過朴恳，如果使用不善，EventBus會是一種災難允蚣，到底是什么樣的“災難”了于颖？大家都知道vue是單頁應用，如果你在某一個頁面刷新了之后嚷兔，與之相關的EventBus會被移除森渐，這樣就導致業(yè)務走不下去。還有就是如果業(yè)務有反復操作的頁面冒晰，EventBus在監(jiān)聽的時候就會觸發(fā)很多次同衣，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關系壶运。通常會用到耐齐，在vue頁面銷毀時，同時移除EventBus事件監(jiān)聽。
初始化
- 首先需要創(chuàng)建事件總線并將其導出埠况，以便其它模塊可以使用或者監(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是一個全局的事件總線尝胆。用法基本一樣，全局的不用引入event-bus.js护桦，只需
this.$EventBus就可以調(diào)用$emit含衔、$on、$off等方法二庵。現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus 贪染，接下來你需要做到的就是在你的組件中加載它，并且調(diào)用同一個方法催享，就如你在父子組件中互相傳遞消息一樣杭隙。
// 發(fā)送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 監(jiān)聽接收消息
EventBus.$on(channel: string, callback(payload1,…))
// 移除事件的監(jiān)聽
EventBus.$off('aMsg')
// 移除所有事件的監(jiān)聽
EventBus.$off()
實例：
// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();
// CptA.vue
<template>
<div>
<button @click="btn">btn</button>
</div>
</template>
<script>
import {eventBus} from "../utils/eventBus";
export default {
name: "CptA",
methods: {
btn() {
eventBus.$emit('aMsg', '我來自CptA')
}
},
}
</script>
// CptB.vue
<template>
<div>{{msg}}</div>
</template>
<script>
import {eventBus} from "../utils/eventBus";
export default {
name: "PageA",
data() {
return {
msg: 'value'
}
},
mounted() {
eventBus.$on('aMsg', mm => {
this.msg = mm;
console.log(mm)
})
}
}
</script>
組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件，否則會導致多次監(jiān)聽問題
this.$bus.$off('toOrder').$on('toOrder', this.updateAddress)
