• vue組件非常常見的有父子組件通信，兄弟組件通信。而父子組件通信就很簡單，父組件會通過 props 向下傳數據給子組件，當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。今天就來說說如果兩個頁面沒有任何引入和被引入關系，該如何通信？

• 如果咱們的應用程序不需要類似Vuex這樣的庫來處理組件之間的數據通信，就可以考慮Vue中的 事件總線 ，即 EventBus來通信。

• EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的“災難”，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。

• 前面提到過，如果使用不善，EventBus會是一種災難，到底是什么樣的“災難”了？大家都知道vue是單頁應用，如果你在某一個頁面刷新了之后，與之相關的EventBus會被移除，這樣就導致業務走不下去。還有就是如果業務有反復操作的頁面，EventBus在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關系。通常會用到，在vue頁面銷毀時，同時移除EventBus事件監聽。

初始化

• 首先需要創建事件總線并將其導出，以便其它模塊可以使用或者監聽它。我們可以通過兩種方式來處理。先來看第一種，新創建一個 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

• 實質上EventBus是一個不具備 DOM 的組件，它具有的僅僅只是它實例方法而已，因此它非常的輕便。

• 另外一種方式，可以直接在項目中的 main.js 初始化 EventBus :

// main.js
Vue.prototype.$EventBus = new Vue()

• 注意，這種方式初始化的EventBus是一個全局的事件總線。用法基本一樣，全局的不用引入event-bus.js，只需this.$EventBus就可以調用$emit、$on、$off等方法。

• 現在我們已經創建了 EventBus ，接下來你需要做到的就是在你的組件中加載它，并且調用同一個方法，就如你在父子組件中互相傳遞消息一樣。

// 發送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 監聽接收消息
EventBus.$on(channel: string, callback(payload1,…))

// 移除事件的監聽
EventBus.$off('aMsg')

// 移除所有事件的監聽
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注銷事件，否則會導致多次監聽問題
this.$bus.$off('toOrder').$on('toOrder', this.updateAddress)