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

1：創建$bus文件

創建一個文件內容如下：

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是傳來的值，可以接收多個參數 })

5:填坑之路

大家假設一下一個場景現在有3個組件分別是A（父組件），B（子組件），C（子組件）

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

6：總結

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

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

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

1.作用:

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

2、注冊

在main.js中注冊

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

3、使用

A頁面傳遞給B也頁面：

A頁面中，觸發了一個叫toBPage的事件，并傳遞了參數’hello world!’

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

B頁面中，this.$bus.on監聽了bPage并傳入了回調函數this.getBPage，該回調函數的參數就是傳遞過來的數據

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

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

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

以上這篇淺談vue中$bus的使用和涉及到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。