vue中的總線機(jī)制(EventBus)解析
更新時(shí)間：2022年10月13日 10:00:51 作者：燕穗子博客
這篇文章主要介紹了vue中的總線機(jī)制(EventBus)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
一、EventBus的簡(jiǎn)介
EventBus 又稱時(shí)間總線 ，理解上來(lái)講 EventBus 機(jī)制是通知的概念，EventBus作為所有組件共享的事件中心，既可以發(fā)送事件也可以接受事件，所有組件都可以平行的接到到相對(duì)應(yīng)的數(shù)據(jù)。
二、使用方法
第一步：2種方式初始化
在項(xiàng)目中使用事件總線時(shí)，需要初始化一條總線，初始化的方式有兩種
第一種：通過(guò) .js 文件將總線作為模塊化導(dǎo)入
// EventBus.js import Vue from 'vue' export defalut new Vue()
第二種：通過(guò) prototype 將總線注冊(cè)為全局總線，直接在main.js中初始化以下代碼（推薦使用）
//main.js
?
Vue.prototype.bus = new Vue();
new Vue({
? render: h => h(App)
? ? ...
}).$mount('#app');
/*
*通過(guò)把一個(gè)vue實(shí)例賦于Vue構(gòu)造函數(shù)原型上的一個(gè)屬性bus（當(dāng)然起任何名稱都是可以的）
*而每個(gè)Vue實(shí)例都是有$emit和$on方法的
*由于bus屬性在Vue原型上，根據(jù)原型鏈查找規(guī)則，在頁(yè)面中我們就可以通過(guò) this.bus.$emit 和?
*this.bus.$on來(lái)進(jìn)行跨組件通信了
*/第二步：發(fā)送事件
在組件中引入總線文件 ，使用 EventBus.$emit(‘事件名稱’，數(shù)據(jù))進(jìn)行發(fā)送數(shù)據(jù)
//導(dǎo)航欄組件中
//點(diǎn)擊事件發(fā)生時(shí)發(fā)布一個(gè)事件
this.bus.$emit('even-name'，args1, arg2 , ...)
?
//這里我們可以把點(diǎn)擊導(dǎo)航的相關(guān)信息攜帶出去第三步：接受事件
在組件中引入總線文件 ，使用 EventBus.$on(‘emit事件名’，callback(payload1...))進(jìn)行接受事件
在一個(gè)組件中某事件如果只監(jiān)聽(tīng)一次的話，可以使用 EventBus.$once('事件名稱',callBack(payload1...));
//路由顯示頁(yè)面中
this.bus.$on('event-name', (...args) => {
? ? //根據(jù)參數(shù)來(lái)進(jìn)行路由跳轉(zhuǎn)
})第四步：移除事件
EventBus.$off('事件名', callback)，只移除這個(gè)回調(diào)的監(jiān)聽(tīng)器。
EventBus.$off('事件名')，移除該事件所有的監(jiān)聽(tīng)器。
EventBus.$off()， 移除所有的事件監(jiān)聽(tīng)器，注意不需要添加任何參數(shù)。
EventBus.$off('XXXXX', {}) // 移除指定事件
EventBus.$off('XXXXX') // 移除應(yīng)用內(nèi)所有對(duì)此事件的監(jiān)聽(tīng)
EventBus.$off() // 移除應(yīng)用內(nèi)所有事件的監(jiān)聽(tīng)三、全局EventBus
1、注冊(cè)，在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)缺點(diǎn)
缺點(diǎn)
- vue作為單頁(yè)面應(yīng)用，如果在某一個(gè)頁(yè)面刷新了之后，與之相關(guān)的EventBus會(huì)被移除。
- 如果業(yè)務(wù)有反復(fù)操作的頁(yè)面，EventBus在監(jiān)聽(tīng)的時(shí)候就會(huì)觸發(fā)很多次，也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系。通常會(huì)用到，在vue頁(yè)面銷毀時(shí)，同時(shí)移除EventBus事件監(jiān)聽(tīng)。
- 由于是都使用一個(gè)Vue實(shí)例，所以容易出現(xiàn)重復(fù)觸發(fā)的情景，兩個(gè)頁(yè)面都定義了同一個(gè)事件名，并且沒(méi)有用$off銷毀（常出現(xiàn)在路由切換時(shí)）。
優(yōu)點(diǎn)
- 解決了多層組件之間繁瑣的事件傳播。
- 使用原理十分簡(jiǎn)單，代碼量少。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過(guò)實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
vue elementui異步給dom賦值無(wú)效問(wèn)題
這篇文章主要介紹了vue elementui異步給dom賦值無(wú)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法
這篇文章主要給大家介紹了關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue3獲取url地址參數(shù),Vue3?獲取地址欄參數(shù)有兩個(gè)方式：查詢參數(shù)和路徑參數(shù)，文中結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了在 React、Vue項(xiàng)目中使用SVG的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在vue中，使用watch來(lái)響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡(jiǎn)單的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開(kāi)發(fā)經(jīng)常遇到異步的問(wèn)題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06