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',

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