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

轉載：https://www.jianshu.com/p/f866c8ac4d02

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添加一個屬性bus並代理，emit,on,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.vue

<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.on,在beforeDestroy鈎子里應該再使用 bus.off解除，因為銷毀后，就沒必要把監聽的句柄存儲在vue-bus。