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也跟着一起銷燬
}