Vue2中如何使用全局事件總線實現(xiàn)任意組件間通信

更新時間：2022年12月28日 11:39:09 作者：卡卡西最近怎么樣

全局事件總線就是一種組件間通信的方式,適用于任意組件間通信,下面這篇文章主要給大家介紹了關于Vue2中如何使用全局事件總線實現(xiàn)任意組件間通信的相關資料,需要的朋友可以參考下

前言：

vue 中組件間通信的方式有很多 ------ 父傳子propos，全局事件總線，消息訂閱，vuex......等等，這篇文章帶大家學習一下通過全局事件總線來實現(xiàn)任意組件間的通信。

一：什么是全局事件總線

全局事件總線 其實就是一個中間人，組件與組件之間的通信需要借助于這個中間人，在一個組件中向其綁定自定義事件，然后在另一個組件觸發(fā)向全局事件總線中綁定的這個自定義事件并傳遞值，進而實現(xiàn)通信。我們可以通過下面的一個圖來粗略解釋什么是全局事件總線
組件C向組件A傳遞數(shù)據(jù)：
首先組件A向全局事件總線綁定另一個自定義事件，并定義了當這個事件do被觸發(fā)時要執(zhí)行的回調(diào)函數(shù)
然后由組件C去觸發(fā)全局事件總線中的自定義事件do，并向其回調(diào)中傳遞數(shù)據(jù)
這樣就實現(xiàn)了組件C去觸發(fā)事件并傳遞數(shù)據(jù)，組件A去定義事件并接受數(shù)據(jù)

二：全局事件總線怎么創(chuàng)建

上一版塊我們知道了全局事件總線就是一個處于任何組件都訪問得到的中間媒介，既然要讓所有組件都訪問得到，那我們就要轉(zhuǎn)換思路，即讓 vc 或者 vm 訪問得到：

在 vue 文件的 main.js 入口函數(shù)中的 beforeCreate 鉤子中創(chuàng)建：

$bus 就是我們的全局事件總線，其定義并賦值后就是 vm，可以訪問 vue 原型對中的所有方法，這就包含了綁定的方法 $on，觸發(fā)的方法 $emit，解綁的方法 $off

new Vue({
  el:'#app',
  render: h => h(App),
  //定義全局事件總線 $bus
  beforeCreate:function(){
      Vue.prototype.$bus=this;
  }
})

三：綁定自定義事件

創(chuàng)建過全局事件總線后，就可以開始綁定自定義事件了，使用 $on 綁定自定義事件，綁定要寫在 mounted 鉤子中，后面為其觸發(fā)時執(zhí)行的回調(diào)。

//A組件
export default {
   name:'componentA',
   data() {
    return {}
   },
   mounted(){
      this.$bus.$on('do',(data)=>{    //為全局事件總線綁定自定義事件do
         console.log('我收到了B組件傳來的姓名：',data);
      })
   }
}

四：觸發(fā)自定義事件

綁定過后就可以在另一個組件中觸發(fā)了，觸發(fā)使用的是 $emit，觸發(fā)并將后面的值傳給自定義事件被觸發(fā)時執(zhí)行的回調(diào)

//組件B
export default {
    name:'componentB',
    data() {
        return {
            name:'張三'
        }
    },
    methods:{
        get:function(){  //在該組件的模板中添加一個按鈕點擊執(zhí)行該函數(shù) get
            this.$bus.$emit('do',this.name)   //觸發(fā)自定義事件do
        },
  }
}

成功實現(xiàn)任意組件間傳遞數(shù)據(jù)

五：解綁自定義事件

vue 實例總將被銷毀，那么我們就要在實例銷毀前解綁自定義事件，這就要和綁定自定義事件同級書寫，即寫在 beforeDestroy 鉤子中，使用 $off 解綁

//A組件
export default {
   name:'componentA',
   data() {
    return {}
   },
   mounted(){
      this.$bus.$on('do',(data)=>{    //為全局事件總線綁定自定義事件do
         console.log('我收到了B組件傳來的姓名：',data);
      })
   },
 
   beforeDestroy(){
        this.$bus.$off('do')  //解綁自定義事件do
   }
}