vue 事件總線 eventbus

vue 事件總線 eventbus

前言

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 {
      //初始化一個msgB
      msgB: ''
    }
  },
  mounted() {
    /*調用全局Vue實例中的$EventBus事件總線中的$on屬性,監聽A組件發送
    到事件總線中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //將A組件傳遞過來的參數data賦值給msgB
      this.msgB = data;
    });
  }
};
</script>

B組件展示結果：

A組件中的Msg

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

四、移除監聽事件

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

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

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

<!-- B.vue -->

<template>

  <!-- 展示msgB -->
  <p>{{msgB}}</p>
  
</template>

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

結束語
好了，對於vue中的事件總線的講解就到這裏了，這也是我今天在做項目時用到的一個小知識點，接下來附上一張我因爲沒有及時移除事件監聽，導致我每重進組件一次就報錯48條錯誤信息的圖，希望大家在我的文章中能血啊都一些東西，並且不要再犯我的這種低級錯誤。

————————————————
版權聲明：本文爲CSDN博主「Lpyexplore」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/l_ppp/article/details/105924658