Hello大家周末好，最近項(xiàng)目比較忙所以沒(méi)有及時(shí)的更新抱歉，今天給大家講一vue.bus。使用過(guò)的都知道$bus是兄弟之間相互傳值的項(xiàng)目中說(shuō)實(shí)話用的地方不算多但是也會(huì)用到（每一個(gè)領(lǐng)域都是會(huì)有坑的呀）。

1：創(chuàng)建$bus文件

創(chuàng)建一個(gè)文件內(nèi)容如下：

import Vue from 'vue'

export default new Vue();

2：引入$bus

main.js: import Bus from './views/bus/bus';

Vue.prototype.$bus = Bus; //注意這里的Vue是我上面引入的vue import Vue from 'vue'

3：使用傳值

this.$bus.$emit("vaPage",value); //很像父子之間傳值的方法

4：接收

 this.$bus.$on("vaPage", v =>{ //vaPage傳的時(shí)候的key是什么接收就必須是什么
  console.log(v); //v是傳來(lái)的值，可以接收多個(gè)參數(shù)
 })

5:填坑之路

大家假設(shè)一下一個(gè)場(chǎng)景現(xiàn)在有3個(gè)組件分別是A（父組件），B（子組件），C（子組件）

這時(shí)候B,C之間的通信就可以用$bus了，比如我在B中進(jìn)行了操作然后要刷新自己和C組件的dom咱們就可以通過(guò)this.$bus.$emit(key,value); 然后C接受this.$bus.$on("key",v=>{});可以在這個(gè)組件調(diào)用方法什么的你在這里調(diào)用方法的時(shí)候會(huì)發(fā)現(xiàn)我只寫(xiě)了一次調(diào)用初始化的函數(shù)為啥會(huì)調(diào)用多少而且不刷新頁(yè)面的時(shí)候越來(lái)越多，這是需要使用到咱們的生命周期函數(shù)beforDestroy在當(dāng)前組件銷毀的時(shí)候注銷這個(gè)$bus的方法：beforDestroy(){this.$bus.$off("val")//關(guān)閉$Bus}.

6：總結(jié)

使用$bus的時(shí)候在接受bus的組件中別忘了再beforDestroy函數(shù)中銷毀bus，不銷毀的話會(huì)一直疊加的調(diào)用這個(gè)方法：

beforDestroy（）{
   this.$bus.$off("vaPage"); //當(dāng)這個(gè)組件銷毀的時(shí)候bus也跟著一起銷毀
  }

補(bǔ)充知識(shí)：vue-bus中央事件總線（兄弟組件之間傳值）

1.作用:

非父子組件（例如兄弟組件）之間傳值的方式，可以用vuex，也可以用事件總線，已下是事件總線（vue-bus）的介紹：

2、注冊(cè)

在main.js中注冊(cè)

import Vue from 'vue';
import VueBus from 'vue-bus';//中央事件總線
...
Vue.use(VueBus);
...

3、使用

A頁(yè)面?zhèn)鬟f給B也頁(yè)面：

A頁(yè)面中，觸發(fā)了一個(gè)叫toBPage的事件，并傳遞了參數(shù)'hello world!'

...
methods: {
 toBPage(){
 this.$bus.emit('bPage', 'hello world!');
 },
}
...

B頁(yè)面中，this.$bus.on監(jiān)聽(tīng)了bPage并傳入了回調(diào)函數(shù)this.getBPage，該回調(diào)函數(shù)的參數(shù)就是傳遞過(guò)來(lái)的數(shù)據(jù)

created() {
 this.$bus.on('bPage', this.getBPage);
},
methods: {
 getBPage(item){
 console.log(item);//item就是傳遞過(guò)來(lái)的數(shù)據(jù)
 },
}

4.離開(kāi)該頁(yè)面時(shí)就無(wú)需再監(jiān)聽(tīng)了，所以要銷毀該監(jiān)聽(tīng)事件，this.$bus.off就是銷毀該監(jiān)聽(tīng)事件

beforeDestroy() {
 this.$bus.off('bPage', this.getBPage);
},

以上這篇淺談vue中$bus的使用和涉及到的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論