中央事件總線eventBus的實質(zhì)就是創(chuàng)建一個vue實例钓丰，通過一個空的vue實例作為橋梁實現(xiàn)vue組件間的通信。它是實現(xiàn)非父子組件通信的一種解決方案虽抄。
eventBus 一般用法
而 eventBus實現(xiàn)也非常簡單
import Vue from 'Vue'
export default new Vue
我們在使用中經(jīng)常最容易忽視余素，又必然不能忘記的東西闻鉴，那就是:清除事件總線 eventBus。
不手動清除芒篷，它是一直會存在搜变，這樣當前執(zhí)行時，會反復進入到接受數(shù)據(jù)的組件內(nèi)操作獲取數(shù)據(jù)针炉，原本只執(zhí)行一次的獲取的操作將會有多次操作挠他。本來只會觸發(fā)并只執(zhí)行一次，變成了多次篡帕，這個問題就非常嚴重殖侵。
當不斷進行操作幾分鐘后，頁面就會卡頓镰烧，并占用大量內(nèi)存拢军。
所以一般在vue生命周期 beforeDestroy或者 destroyed中，需要用vue實例的 $off方法清除 eventBus
beforeDestroy () {
bus.$off('click')
}
可當你有多個 eventBus時怔鳖，就需要重復性勞動 $off銷毀這件事兒茉唉。
這時候封裝一個 eventBus就是更佳的解決方案。
擁有生命周期的 eventBus
我們從Vue.init中可以得知：
Vue.prototype._init = function () {
const vm: Component = this
// a uid vm實例唯一標識
vm._uid = uid ++
// ...
}
每個Vue實例有自己的 _uid作為唯一標識败砂，因此我們讓 EventBus和_uid`關聯(lián)起來赌渣，并將其改造:
image.png
main.js中注冊：
import EventBus from './eventBus.js'
Vue.use(EnemtBus)
組件中使用：
created () {
/**
* @description 訂閱 on-change 事件
* @param
* 參數(shù)1 事件名
* 參數(shù)2 事件傳遞參數(shù)
* 參數(shù)3 默認為當前組件this，如果不傳則需要手動銷毀
*/
this.$eventBus.$on('on-change', (...args) => {
console.log(...args)
//
}, this)
}
methods () {
onChangeHandle() {
this.$eventBus.$emit('on-change', '傳遞參數(shù)1', '傳遞參數(shù)2')
}
},
beforeDestroy () {
// 不再需要手動銷毀eventBus訂閱事件
}
