快捷導(dǎo)航

vue總線(xiàn)機(jī)制(bus)知識(shí)點(diǎn)詳解

更新時(shí)間：2020年05月10日 17:12:34 作者：csdn

在本篇文章中小編給大家整理的是關(guān)于vue總線(xiàn)機(jī)制(bus)知識(shí)點(diǎn)總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。

vue中非父子組件之間通信除了使用vuex，也可以通過(guò)bus總線(xiàn)，兩者適用場(chǎng)景不同。

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

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

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

//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)然起任何名稱(chēng)都是可以的）
*而每個(gè)Vue實(shí)例都是有$emit和$on方法的
*由于bus屬性在Vue原型上，根據(jù)原型鏈查找規(guī)則，在頁(yè)面中我們就可以通過(guò) this.bus.$emit 和 
*this.bus.$on來(lái)進(jìn)行跨組件通信了
*/

//導(dǎo)航欄組件中
//點(diǎn)擊事件發(fā)生時(shí)發(fā)布一個(gè)事件
this.bus.$emit('even-name'，args1, arg2 , ...)
 
//這里我們可以把點(diǎn)擊導(dǎo)航的相關(guān)信息攜帶出去

//路由顯示頁(yè)面中
this.bus.$on('event-name', (...args) => {
  //根據(jù)參數(shù)來(lái)進(jìn)行路由跳轉(zhuǎn)
})

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

但是這樣還是有點(diǎn)麻煩，每個(gè)頁(yè)面都需要引入mixins，有沒(méi)有更好的辦法呢？答案是肯定的。我們項(xiàng)目導(dǎo)航欄是通過(guò)路由meta循環(huán)出來(lái)的，每項(xiàng)有對(duì)應(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)航欄長(zhǎng)度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)
}

知識(shí)點(diǎn)補(bǔ)充：

將Bus注入到Vue根對(duì)象中

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　

})

在子組件中通過(guò)this.$root.Bus.$on(),this.$root.Bus.$emit()來(lái)調(diào)用

以上就是vue總線(xiàn)機(jī)制(bus)知識(shí)點(diǎn)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue中總線(xiàn)機(jī)制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue總線(xiàn)機(jī)制(bus)知識(shí)點(diǎn)詳解

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具