vue 事件總線EventBus介紹

1. eventbus 的簡介

eventbus又稱爲事件總線, 在vue中可使用eventbus來做爲溝通橋樑的概念, 是全部組件所共有的事件中心.能夠向該中心註冊發送事件或接收事件.因此組件均可以上下平行地通知其餘組件

2. 如何使用eventbus

(1) 初始化

首先須要建立事件總線並將其導出,以便其餘模塊可使用或者監聽它,有兩種方式處理
第一種,新建一個js文件,好比event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

實際上eventbus是一個不具有dom的組件
另一種方式,能夠直接在項目中的main.js初始化EventBus:

// main.js
Vue.prototype.$EventBus = new Vue()
// 注意這種方式初始化的EventBus是一個全局事件總線,

(2) 發送事件

假設有兩個vue頁面須要通訊, A頁面在按鈕上面綁定了點擊事件,發送一則消息,通知B頁面

// A 頁面
<template>
    <button @click="sendMsg()">-</button>
</template>

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

接下來在B頁面接收消息

(3) 接收事件

<!-- IncrementCount.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>

前面提過,若是使用不善,eventBus會是一個災難, vue是單頁面應用,若是你再某一個頁面刷新以後,與之相關的eventbus將會被移除, 這樣會致使業務走不下去. 還有就是若是業務有反覆操做的頁面, eventBus在監聽的時候就會觸發不少次, 也是一個很是大的隱患. 這時候咱們須要好好處理eventbus在項目中的關係, 一般是在vue頁面銷燬的時候,同事移除eventbus事件監聽

移除事件監聽

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

你但是要EventBus.$off('eqwe')移除應用內全部對此某個事件的監聽, 或者直接調用EventBus.$off() 來移除全部事件頻道.不添加任何參數~~~~

3. 全局eventbus

它的工做原理是發佈/訂閱方法, 一般稱爲pub/sub
建立全局EventBus

// 1. 建立bus.js文件   **src/service/bus.js**
const install = (Vue) => { 
    const Bus = new Vue({ 
        methods: { 
            on (event, ...args) { 
                this.$on(event, ...args); 
            }, 
            emit (event, callback) { 
                this.$emit(event, callback); 
            }, 
            off (event, callback) { 
                this.$off(event, callback); 
            } 
        } 
    }) 
    Vue.prototype.$bus = Bus; 
} 
export default install;

// **maix.js文件中引入**
import Bus from "@/service/bus"; 
Vue.use(Bus);


// **組件中使用**
this.$bus.on('Config_forms',(data)=>{ }) //綁定事件
this.$bus.emit('Config_forms',data) //觸發該方法 this.$bus.off('Config_forms') //解綁事件