實現非父子之間通訊，兄弟組件之間的數據傳遞--eventBus

vue中，組件傳值的方法常見的也就那幾種， 1.父組件向子組件傳值，用props 屬性， 2.子組件主要經過事件傳遞數據給父組件子向父傳數據能夠用$emit觸發傳，可是這種方法沒法實現兄弟組件直接傳數據 3.利用provide/inject,能夠實現由祖先元素向子孫組件傳遞數據，方法，不須要知道祖先組件的其餘做用組件，直接傳遞所須要的 4.利用vuex實現數據共享，把數據統一存入state, 只容許經過Actions觸發Mutations修改，這種也是vue推薦的一種數據傳遞的方法 5.經過params 或者query,這個主要經過路由地址參數來傳遞值 6.藉助中央事件總線（eventBus），主要運用於兄弟組件通訊 今天主要介紹eventBus實現組件通訊，這種方法主要是非父子組件，兄弟之間的組件通訊

EventBus 又稱爲事件總線。在Vue中可使用 EventBus 來做爲溝通橋樑的概念，就像是全部組件共用相同的事件中心，能夠向該中心註冊發送事件或接收事件，因此組件均可以上下平行地通知其餘組件，但也就是太方便因此若使用不慎，就會形成難以維護的災難，所以才須要更完善的Vuex做爲狀態管理中心，將通知的概念上升到共享狀態層次。 在本地建立目錄vue-bus,在其文件下建立vue-bus.js文件。vue-router 和 Vuex 同樣，給Vue添加一個屬性emit, off三個方法。 vue-bus.js

const install = function (Vue) {
    const Bus = new Vue({
        methods: {
            emit (event, ...args) {
                this.$emit(event, ...args);
            },
            on (event, callback) {
                this.$on(event, callback);
            },
            off (event, callback) {
                this.$off(event, callback);
            }
        }
    });
    Vue.prototype.$bus = Bus;
};

export default install;
複製代碼

在mainjs中使用插件

import VueBus from './vue-bus'
Vue.use(VueBus)
複製代碼

counter.js

<template>
    <div>
        {{ number }}
        <button @click="handleAddRandom">隨機增長</button>
    </div>
</template>
<script>
    export default {
        props: {
            number: {
                type: Number
            }
        },
        methods: {
            handleAddRandom () {
                // 隨機獲取 1-100 中的數
                const num = Math.floor(Math.random () * 100 + 1);
                this.$bus.emit('add', num);
            }
        }
    };
</script>
複製代碼

在index.vue 中使用counter組件並監聽來自counter.vue的自定義事件

index.vue

<template>
    <div>
        <h1>首頁</h1>
        隨機增長：
        <Counter :number="number"></Counter>
    </div>
</template>
<script>
    import Counter from './counter.vue';
    export default {
        components: {
            Counter
        },
        data () {
            return {
                number: 0
            }
        },
        methods: {
		handleAddRandom (num) {
                this.number += num;
            }
	},
        created () {
            this.$bus.on('add', this.handleAddRandom);
        },
        beforeDestroy () {
            this.$bus.off('add', this.handleAddRandom);
        }
    }
</script>

複製代碼

vue-bus的代碼比較簡單，但它卻解決來跨組件直接的通訊問題，並且經過插件的形式使用後，全部的組件均可以使用$bus,而無須每一個組件導入bus組件， 使用vue-bus須要注意兩點：

1. $bus.on應該在created鉤子內使用，若是在mounted使用，它可能接收不到其餘組件來自created鉤子內發出的事件；
2. 使用了bus.off解除，由於銷燬後，就不必把監聽的句柄存儲在vue-bus。