EventBus的簡介

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

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

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

大家都知道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可以較好的實現兄弟元件之間的資料通訊。