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

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

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

前言：

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

一：什么是全局事件總線

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

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

上一版塊我們知道了全局事件總線就是一個(gè)處于任何組件都訪問得到的中間媒介，既然要讓所有組件都訪問得到，那我們就要轉(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ā)時(shí)執(zhí)行的回調(diào)。

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

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

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

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

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

五：解綁自定義事件

vue 實(shí)例總將被銷毀，那么我們就要在實(shí)例銷毀前解綁自定義事件，這就要和綁定自定義事件同級書寫，即寫在 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
   }
}