Vue事件總線（EventBus）使用詳細介紹

EventBus的簡介

eventBus主要運用於兄弟組件通信 今天主要介紹eventBus實現組件通信，這種方法主要是非父子組件，兄弟之間的組件通信。

EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的災難，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。

會是一種什么樣的災難呢？

大家都知道vue是單頁應用，如果你在某一個頁面刷新了之后，與之相關的EventBus會被移除，這樣就導致業務走不下去。還要就是如果業務有反復操作的頁面，EventBus 在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理 EventBus 在項目中的關系。通常會用到，在vue頁面銷毀時，同時移除EventBus 事件監聽。

使用：（兩種方式）

一、新建一個eventbus.js文件

---

 1，初始化

首先需要創建事件總線並將其導出，以便其它模塊可以使用或者監聽它。有兩種方式初始化。

方法1：

新建一個eventbus.js文件

// eventbus.js
import Vue from 'vue'
export const EventBus = new Vue()

方法2：(這種方式初始化的EventBus是一個全局的事件總線)

在項目中的main.js初始化EventBus

// main.js
Vue.prototype.$EventBus = new Vue()

2，發送事件

EventBus.$emit("aMsg", '來自A頁面的消息');

點擊A頁面的按鈕通知B頁面

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>
 
<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '來自A頁面的消息');
    }
  }
}; 
</script>

3，接收事件

EventBus.$on("aMsg", (msg) => {
      // A發送來的消息
      this.msg = msg;
    });

<!-- B.vue -->
<template>
  <p>{{msg}}</p>
</template>
 
<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => { // A發送來的消息 this.msg = msg; });
  }
};
</script>

同理我們也可以在 B頁面 向 A頁面 發送消息。這里主要用到的兩個方法：

// 發送消息
EventBus.$emit(channel: string, callback(payload1,…))
 
// 監聽接收消息
EventBus.$on(channel: string, callback(payload1,…))

4，移除事件監聽者

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

 移除應用內所有對此個事件的的監聽

EventBus.$off('aMsg')

　移除所有事件頻道，不需要添加任何參數

EventBus.$off()

以上的示例中，每次使用 EventBus 時都需要在各組件中引入 eventbus.js 。

我們還可以通過別的方式讓事情變得簡單一些，那就是創建一個全局的EventBus。

二、全局EventBus

---

 工作原理：發布訂閱方法，通常為Pub/Sub

1、創建全局EventBus

var EventBus = new Vue();
 
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

在這個特定的總線中使用兩個方法 $on 和 $emit 。

$emit  用於創建發出的事件；

$on   用於訂閱 

var EventBus = new Vue();
 
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
 
this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

 

//A.vue
this.$bus.$emit("sendMsg", '我是web秀');

//B.vue
this.$bus.$on('updateMessage', function(value) {
  console.log(value); // 我是web秀
})

 

//移除事件監聽
this.$bus.$off('sendMsg')

 總結：從實例中我們可以了解到， EventBus 可以較好的實現兄弟組件之間的數據通訊。