vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。

bus適合小項(xiàng)目、數(shù)據(jù)被更少組件使用的項(xiàng)目，對于中大型項(xiàng)目 數(shù)據(jù)在很多組件之間使用的情況 bus就不太適用了。bus其實(shí)就是一個發(fā)布訂閱模式，利用vue的自定義事件機(jī)制，在觸發(fā)的地方通過$emit向外發(fā)布一個事件,在需要監(jiān)聽的頁面，通過$on監(jiān)聽事件。

vuex適用中大型項(xiàng)目、數(shù)據(jù)在多組件之間公用的情況。

簡單介紹兩者的區(qū)別之后，就要介紹下我在一個項(xiàng)目中遇到的一個場景了，這個場景使用bus可能更加適合些：

//main.js Vue.prototype.bus = new Vue();new Vue({ render: h => h(App) ...}).$mount(’#app’);/**通過把一個vue實(shí)例賦于Vue構(gòu)造函數(shù)原型上的一個屬性bus（當(dāng)然起任何名稱都是可以的）*而每個Vue實(shí)例都是有$emit和$on方法的*由于bus屬性在Vue原型上，根據(jù)原型鏈查找規(guī)則，在頁面中我們就可以通過 this.bus.$emit 和 *this.bus.$on來進(jìn)行跨組件通信了*/

//導(dǎo)航欄組件中//點(diǎn)擊事件發(fā)生時發(fā)布一個事件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)})

這個事件監(jiān)聽 和 路由跳轉(zhuǎn)的邏輯我們可以弄成一個mixins進(jìn)行復(fù)用。到這樣就完成了。

但是這樣還是有點(diǎn)麻煩，每個頁面都需要引入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’, } ] },

在思索時我忽然發(fā)現(xiàn)每個導(dǎo)航欄的index、導(dǎo)航欄長度length、及router.go方法之間有一個規(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)注好吧啦網(wǎng)其它相關(guān)文章！