vue總線機制(bus)知識點詳解
vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。
bus適合小項目、數(shù)據(jù)被更少組件使用的項目，對于中大型項目 數(shù)據(jù)在很多組件之間使用的情況 bus就不太適用了。bus其實就是一個發(fā)布訂閱模式，利用vue的自定義事件機制，在觸發(fā)的地方通過$emit向外發(fā)布一個事件,在需要監(jiān)聽的頁面，通過$on監(jiān)聽事件。
vuex適用中大型項目、數(shù)據(jù)在多組件之間公用的情況。
簡單介紹兩者的區(qū)別之后，就要介紹下我在一個項目中遇到的一個場景了，這個場景使用bus可能更加適合些：
//main.js
Vue.prototype.bus = new Vue();
new Vue({
render: h => h(App)
...
}).$mount('#app');
/*
*通過把一個vue實例賦于Vue構造函數(shù)原型上的一個屬性bus（當然起任何名稱都是可以的）
*而每個Vue實例都是有$emit和$on方法的
*由于bus屬性在Vue原型上，根據(jù)原型鏈查找規(guī)則，在頁面中我們就可以通過 this.bus.$emit 和
*this.bus.$on來進行跨組件通信了
*/
//導航欄組件中
//點擊事件發(fā)生時發(fā)布一個事件
this.bus.$emit('even-name'，args1, arg2 , ...)
//這里我們可以把點擊導航的相關信息攜帶出去
//路由顯示頁面中
this.bus.$on('event-name', (...args) => {
//根據(jù)參數(shù)來進行路由跳轉
})
這個事件監(jiān)聽 和 路由跳轉的邏輯我們可以弄成一個mixins進行復用。到這樣就完成了。
但是這樣還是有點麻煩，每個頁面都需要引入mixins，有沒有更好的辦法呢？答案是肯定的。我們項目導航欄是通過路由meta循環(huán)出來的，每項有對應導航欄的路由，結構如下：
{
path: '/xxxx',
component: xxxx,
meta: [
{
name: '導航1'
},
{
name: '導航2',
url: '我是導航2的路由'
},
{
name: '導航3',
url: '我是導航3的路由'
},
{
name: '導航4',
}
]
},
在思索時我忽然發(fā)現(xiàn)每個導航欄的index、導航欄長度length、及router.go方法之間有一個規(guī)律，那就是我們可以把index + 1 - length作為router.go的參數(shù)，從而不用再關心query參數(shù)了，而且只需要在導航欄組件操作一次就可以了，完美！
//導航欄組件點擊事件處理函數(shù)中
if (url) {
const meta = this.$route.meta;
this.$router.go(index + 1 - meta.length)
}
知識點補充：
將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()來調用
以上就是vue總線機制(bus)知識點詳解的詳細內容，更多關于vue中總線機制的資料請關注腳本之家其它相關文章！
相關文章
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實現(xiàn)2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄滑動拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內容的復用,下面這篇文章主要給大家介紹了關于Vue中mixins的使用方法以及實際項目應用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關于離線搭建vue環(huán)境運行項目的相關資料,文中通過實例代碼以及圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-06-06
vue-draggable實現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實現(xiàn)拖拽表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了vue-cli3多環(huán)境打包配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了基于vue實現(xiàn)圖片驗證碼倒計時60s功能,本文通過截圖實例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue異步加載高德地圖的實現(xiàn)，詳細的介紹了異步加載的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue項目如何實現(xiàn)切換主題色思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01