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

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

創(chuàng)建一個文件內(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傳的時候的key是什么接收就必須是什么
  console.log(v); //v是傳來的值，可以接收多個參數(shù)
 })

5:填坑之路

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

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

6：總結(jié)

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

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

補充知識：vue-bus中央事件總線（兄弟組件之間傳值）

1.作用:

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

2、注冊

在main.js中注冊

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

3、使用

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

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

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

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

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

4.離開該頁面時就無需再監(jiān)聽了，所以要銷毀該監(jiān)聽事件，this.$bus.off就是銷毀該監(jiān)聽事件

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

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

最新評論