vue中的總線機制(EventBus)解析
更新時間：2022年10月13日 10:00:51 作者：燕穗子博客
這篇文章主要介紹了vue中的總線機制(EventBus)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、EventBus的簡介
EventBus 又稱時間總線 ，理解上來講 EventBus 機制是通知的概念，EventBus作為所有組件共享的事件中心，既可以發(fā)送事件也可以接受事件，所有組件都可以平行的接到到相對應的數(shù)據(jù)。
二、使用方法
第一步：2種方式初始化
在項目中使用事件總線時，需要初始化一條總線，初始化的方式有兩種
第一種：通過 .js 文件將總線作為模塊化導入
// EventBus.js import Vue from 'vue' export defalut new Vue()
第二種：通過 prototype 將總線注冊為全局總線，直接在main.js中初始化以下代碼（推薦使用）
//main.js
?
Vue.prototype.bus = new Vue();
new Vue({
? render: h => h(App)
? ? ...
}).$mount('#app');
/*
*通過把一個vue實例賦于Vue構(gòu)造函數(shù)原型上的一個屬性bus（當然起任何名稱都是可以的）
*而每個Vue實例都是有$emit和$on方法的
*由于bus屬性在Vue原型上，根據(jù)原型鏈查找規(guī)則，在頁面中我們就可以通過 this.bus.$emit 和?
*this.bus.$on來進行跨組件通信了
*/第二步：發(fā)送事件
在組件中引入總線文件 ，使用 EventBus.$emit(‘事件名稱’，數(shù)據(jù))進行發(fā)送數(shù)據(jù)
//導航欄組件中
//點擊事件發(fā)生時發(fā)布一個事件
this.bus.$emit('even-name'，args1, arg2 , ...)
?
//這里我們可以把點擊導航的相關(guān)信息攜帶出去第三步：接受事件
在組件中引入總線文件 ，使用 EventBus.$on(‘emit事件名’，callback(payload1...))進行接受事件
在一個組件中某事件如果只監(jiān)聽一次的話，可以使用 EventBus.$once('事件名稱',callBack(payload1...));
//路由顯示頁面中
this.bus.$on('event-name', (...args) => {
? ? //根據(jù)參數(shù)來進行路由跳轉(zhuǎn)
})第四步：移除事件
EventBus.$off('事件名', callback)，只移除這個回調(diào)的監(jiān)聽器。
EventBus.$off('事件名')，移除該事件所有的監(jiān)聽器。
EventBus.$off()， 移除所有的事件監(jiān)聽器，注意不需要添加任何參數(shù)。
EventBus.$off('XXXXX', {}) // 移除指定事件
EventBus.$off('XXXXX') // 移除應用內(nèi)所有對此事件的監(jiān)聽
EventBus.$off() // 移除應用內(nèi)所有事件的監(jiān)聽三、全局EventBus
1、注冊，在main.js中
Vue.prototype.$bus = new Vue();
2、在組件中使用
this.$bus.$on("sendMessage" , (msg) => {
? ? _this.message = msg
})
this.$bus.$emit("sendMessage" , "這是從D組件中傳遞到兄弟組件的內(nèi)容")四、EventBus的優(yōu)缺點
缺點
- vue作為單頁面應用，如果在某一個頁面刷新了之后，與之相關(guān)的EventBus會被移除。
- 如果業(yè)務有反復操作的頁面，EventBus在監(jiān)聽的時候就會觸發(fā)很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關(guān)系。通常會用到，在vue頁面銷毀時，同時移除EventBus事件監(jiān)聽。
- 由于是都使用一個Vue實例，所以容易出現(xiàn)重復觸發(fā)的情景，兩個頁面都定義了同一個事件名，并且沒有用$off銷毀（常出現(xiàn)在路由切換時）。
優(yōu)點
- 解決了多層組件之間繁瑣的事件傳播。
- 使用原理十分簡單，代碼量少。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue封裝第三方插件并發(fā)布到npm的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下2024-03-03
對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應用開發(fā)中實現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個支持單列編輯的表格組件,本教程詳細闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機制,幫助你快速掌握Vue3中表格編輯功能的實現(xiàn),感興趣的朋友一起看看吧2024-09-09
element-plus報錯ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報錯ResizeObserver?loop?limit?exceeded的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
下面小編就為大家分享一篇Vue實現(xiàn)active點擊切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了VUE表格顯示錯位的兩種解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title
今天小編就為大家分享一篇vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04