vue總線機(jī)制(bus)知識點(diǎn)詳解
vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。
bus適合小項(xiàng)目、數(shù)據(jù)被更少組件使用的項(xiàng)目，對于中大型項(xiàng)目 數(shù)據(jù)在很多組件之間使用的情況 bus就不太適用了。bus其實(shí)就是一個(gè)發(fā)布訂閱模式，利用vue的自定義事件機(jī)制，在觸發(fā)的地方通過$emit向外發(fā)布一個(gè)事件,在需要監(jiān)聽的頁面，通過$on監(jiān)聽事件。
vuex適用中大型項(xiàng)目、數(shù)據(jù)在多組件之間公用的情況。
簡單介紹兩者的區(qū)別之后，就要介紹下我在一個(gè)項(xiàng)目中遇到的一個(gè)場景了，這個(gè)場景使用bus可能更加適合些：
//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)行跨組件通信了
*/
//導(dǎo)航欄組件中
//點(diǎn)擊事件發(fā)生時(shí)發(fā)布一個(gè)事件
this.bus.$emit('even-name'，args1, arg2 , ...)
//這里我們可以把點(diǎn)擊導(dǎo)航的相關(guān)信息攜帶出去
//路由顯示頁面中
this.bus.$on('event-name', (...args) => {
//根據(jù)參數(shù)來進(jìn)行路由跳轉(zhuǎn)
})
這個(gè)事件監(jiān)聽 和 路由跳轉(zhuǎn)的邏輯我們可以弄成一個(gè)mixins進(jìn)行復(fù)用。到這樣就完成了。
但是這樣還是有點(diǎn)麻煩，每個(gè)頁面都需要引入mixins，有沒有更好的辦法呢？答案是肯定的。我們項(xiàng)目導(dǎo)航欄是通過路由meta循環(huán)出來的，每項(xiàng)有對應(yīng)導(dǎo)航欄的路由，結(jié)構(gòu)如下：
{
path: '/xxxx',
component: xxxx,
meta: [
{
name: '導(dǎo)航1'
},
{
name: '導(dǎo)航2',
url: '我是導(dǎo)航2的路由'
},
{
name: '導(dǎo)航3',
url: '我是導(dǎo)航3的路由'
},
{
name: '導(dǎo)航4',
}
]
},
在思索時(shí)我忽然發(fā)現(xiàn)每個(gè)導(dǎo)航欄的index、導(dǎo)航欄長度length、及router.go方法之間有一個(gè)規(guī)律，那就是我們可以把index + 1 - length作為router.go的參數(shù)，從而不用再關(guān)心query參數(shù)了，而且只需要在導(dǎo)航欄組件操作一次就可以了，完美！
//導(dǎo)航欄組件點(diǎn)擊事件處理函數(shù)中
if (url) {
const meta = this.$route.meta;
this.$router.go(index + 1 - meta.length)
}
知識點(diǎn)補(bǔ)充：
將Bus注入到Vue根對象中
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子組件中通過this.$root.Bus.$on(),this.$root.Bus.$emit()來調(diào)用
以上就是vue總線機(jī)制(bus)知識點(diǎn)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue中總線機(jī)制的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue清除瀏覽器全部cookie的問題及解決方法(絕對有效!)
最近項(xiàng)目要實(shí)現(xiàn)關(guān)閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關(guān)于vue清除瀏覽器全部cookie的問題及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
el-input限制輸入正整數(shù)的兩種實(shí)現(xiàn)方式
el-input框是Element UI庫中的一個(gè)輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下2024-02-02
最近被問起是否了解vue的插槽（slot），咋一想發(fā)現(xiàn)，似乎很少用到這玩意。所以整理了下slot的一些用法2022-08-08
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計(jì)等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
Vue利用localStorage本地緩存使頁面刷新驗(yàn)證碼不清零功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue利用localStorage本地緩存使頁面刷新驗(yàn)證碼不清零功能的實(shí)現(xiàn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
axios 是一個(gè)基于promise的HTTP庫,支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請求問題,內(nèi)容從axios部署開始到解決跨域問題,感興趣的朋友一起看看吧2023-11-11
Vue是當(dāng)前很火的一款MVVM的輕量級框架，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。因?yàn)樗峁┝撕啙嵰子诶斫獾腶pi，使得我們很容易上手。這篇文章給大家介紹了vue雙向數(shù)據(jù)綁定問題，感興趣的朋友一起看看吧2017-10-10
vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09