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