vue組件中的數據傳遞最最常見的就是父子組件之間的傳遞。父傳子通過props向下傳遞數據給子組件；子傳父通過$emit發送事件，并攜帶數據給父組件。而有時兩個組件之間毫無關系，或者他們之間的結構復雜，如何傳遞數據呢？這時就要用到 vue 中的事件總線 EventBus的概念

EventBus的簡介

EventBus又稱事件總線，相當于一個全局的倉庫，任何組件都可以去這個倉庫里獲取事件

EventBus的使用

廢話不多說，直接開始使用EventBus

一、初始化

要用EventBus，首先要初始化一個EventBus，這里稱它為全局事件總線。

-第一種初始化方法

import Vue from 'vue' //因為是全局的一個'倉庫'，所以初始化要在全局初始化 const EventBus = new Vue()

-第二種初始化方法(本文選用這種初始化方法)

//在已經創建好的Vue實例原型中創建一個EventBus Vue.prototype.$EventBus = new Vue()

二、向EventBus發送事件

發送事件的語法：this.$EventBus.$emit(發送的事件名,傳遞的參數)

已經創建好EventBus后我們就需要向它發送需要傳遞的事件，以便其他組件可以向EventBus獲取

例子：有兩個組件A和B需要通信，他們不是父子組件關系，B事件需要獲得A事件里的一組數據data

<!-- A.vue 這里是以模塊化的方式講解的，即A組件和B組件分別各自 一個.vue文件,所以代碼中會有導入的語法--><template><button @click="sendMsg">發送MsgA</button> </template><script> export default {data(){return{MsgA: 'A組件中的Msg'}},methods: {sendMsg() {/*調用全局Vue實例中的$EventBus事件總線中的$emit屬性，發送事件"aMsg",并攜帶A組件中的Msg*/this.$EventBus.$emit("aMsg", this.MsgA);}} }; </script>

三、接收事件

接收事件的語法：this.$EventBus.$on(監聽的事件名, 回調函數)
A組件已經向全局事件總線EventBus發送了一個aMsg事件，這時B組件就可以去aMsg監聽這個事件，并可以獲得一些數據。

<!-- B.vue --><template><!-- 展示msgB --><p>{{msgB}}</p></template><script> export default {data(){return {//初始化一個msgBmsgB: ''}},mounted() {/*調用全局Vue實例中的$EventBus事件總線中的$on屬性,監聽A組件發送到事件總線中的aMsg事件*/this.$EventBus.$on("aMsg", (data) => {//將A組件傳遞過來的參數data賦值給msgBthis.msgB = data;});} }; </script>

B組件展示結果：

A組件中的Msg
這樣，B組件就輕松接收到了A組件傳遞過來的參數，并成功展示了該參數，這樣是不是就很簡單的解決了各組件之間的通訊呢？雖然EventBus是一個很輕便的方法，任何數據都可以往里傳，然后被別的組件獲取，但是如果用不好，容易出現很嚴重的BUG，所以接下來我們就來講解一下移除監聽事件。

四、移除監聽事件

在上一個例子中，我們A組件向事件總線發送了一個事件aMsg并傳遞了參數MsgA，然后B組件對該事件進行了監聽，并獲取了傳遞過來的參數。但是，這時如果我們離開B組件，然后再次進入B組件時，又會觸發一次對事件aMsg的監聽，這時時間總線里就有兩個監聽了，如果反復進入B組件多次，那么就會對aMsg進行多次的監聽。

總而言之，A組件只向EventBus發送了一次事件，但B組件卻進行了多次監聽，EventBus容器中有很多個一模一樣的事件監聽器這時就會出現，事件只觸發一次，但監聽事件中的回調函數執行了很多次

1.解決辦法：在組件離開，也就是被銷毀前，將該監聽事件給移除，以免下次再重復創建監聽
2.語法：this.$EventBus.$off(要移除監聽的事件名)

<!-- B.vue --><template><!-- 展示msgB --><p>{{msgB}}</p></template><script> export default {data(){return {//初始化一個msgBmsgB: ''}},mounted() {/*調用全局Vue實例中的$EventBus事件總線中的$on屬性,監聽A組件發送到事件總線中的aMsg事件*/this.$EventBus.$on("aMsg", (data) => {//將A組件傳遞過來的參數data賦值給msgBthis.msgB = data;});},beforeDestroy(){//移除監聽事件"aMsg"this.$EventBus.$off("aMsg")} }; </script>

總結

以上是生活随笔為你收集整理的vue 事件总线EventBus的概念、使用以及注意点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。