利用eventemitter2實現Vue組件通信

概述

當兩個組件之間沒有任何父子關係時，利用Vue標準的props傳值和emit觸發事件無法解決他們之間通信的問題。最近做的項目使用的是eventemitter2，來實現不相關組件之間的通信。這篇文章分享的是我對eventemitter2使用的總結和體會。

eventemitter2的npm文檔大家可以看 eventemitter2介紹。它是node.js提供的事件接口。安裝如下

npm install --save eventemitter2

模塊的EventEmitter2屬性是一個構造函數，可以生成eventemitter2實例。實例定義了綁定、觸發、移除事件的方法。本文涉及到的實例方法有on，off，emit，removeAllListeners，更多方法，大家可以去npm文檔自行學習。

和其他事件處理機制一樣，eventemitter2事件處理，必須包含三部分：
綁定事件 =》 觸發事件 =》 移除事件

本次分享，主要討論在vue項目中使用eventemitter2：

• 方法一：結合class模塊化編程，對實例、事件名、綁定事件方法和移除事件方法做封裝
• 方法二：結合vue插件開發，全局添加事件實例

方法一：結合class

開發步驟：

1. 添加模塊 event_confg.js，用於存儲eventEmitter2實例和事件名
2. 添加模塊 event_manager.js，封裝實例綁定事件的方法和移除事件的方法
3. 按照 綁定事件 =》 觸發事件 =》 移除事件的步驟，使用eventeitter2

第一步：創建 event_confg.js

var EventEmitter2 = require('eventemitter2').EventEmitter2;
// emiter中定義的是eventemitter2實例，config中定義的是事件名
const eventConfig = {}

eventConfig.emitter = new EventEmitter2()

eventConfig.config = {
  "CHECK_CHANGES": "checkChanges"
  // 更多的事件名，往這裏添加
}
export default eventConfig

第二步： 創建event_manager.js

此模塊創建的是一個類，傳入eventemitter2實例後，對實例的添加和移除事件的方法做了封裝。
這裏綁定和移除事件，分別用了on，off方法。

export default class {
    constructor(evtInst){
        this.evtInst = evtInst
        this.listeners = {} // {eventName: [callback1,callback2...]}
    }
    // 將事件名evtName的回調綁定爲callback，同時將事件名和回調存到listeners，方便後面移除事件使用
    addListener(evtName, callback){
        this.evtInst.on(evtName, callback)
        if(!this.listeners[evtName]){
            this.listeners[evtName] = [callback]
        }else{
            this.listeners[evtName].push(callback)
        }
    }
    removeListeners(){
        Object.keys(this.listeners).forEach(evtName => {
            this.listeners[evtName].forEach((callback, index) => {
                this.evtInst.off(evtName,callback)
            })
        })
    }
}

第三步： 在組件中使用eventemitter2

綁定事件

同一個事件名，可以綁定多個事件回調，當事件被觸發時，會順序執行同名的回調函數

import EventManager from "@/utils/event_manager.js"
import eventConfig from "@/utils/event_config.js"
...
// 初始化event_manager實例
this.evtManagerInst = new EventManager(eventConfig.emitter)
// 用實例的addListener方法綁定事件
this.evtManagerInst.addListener(eventConfig.config.CHECK_CHANGES, obj => {
    this.value = Object.is(NaN,parseInt(obj.value))
})
this.evtManagerInst.addListener(eventConfig.config.CHECK_CHANGES, obj => {
    console.log("第二個事件也觸發了！",obj)
})

觸發事件

事件的觸發和回調是同步執行的。用下面的方式觸發事件後，執行的過程是：
打印 準備觸發啦！ =》 執行回調 =》 執行 $message彈框

import eventConfig from "@/utils/event_config.js"
...
// 傳給事件回調函數的參數
let obj = {value: val, type: "", msg: ""}
// 觸發事件
console.log("準備觸發啦！")
eventConfig.emitter.emit(eventConfig.config.CHECK_CHANGES, obj)
// 事件觸發後的處理
this.$message({type: obj.type, message: obj.msg})

移除事件

在beforeRouteLeave或者beforeDestory中移除事件
如果使用的是beforeRouteLeave注意調用它的next函數，讓路由繼續往下執行

beforeDestroy(){
    this.evtManagerInst.removeListeners()
}

方法二：結合Vue插件開發

思路是，向頂層Vue對象添加全局的eventemitter2對象作爲屬性。
開發步驟：

1. 使用install創建emitter.js插件，在其中給Vue添加全局屬性
2. 使用全局的Vue.use()方法，使用插件
3. 按照 綁定事件 =》 觸發事件 =》 移除事件的步驟，使用eventeitter2

第一步：創建全局變量

添加全局屬性$emit_inst，存儲實例；添加全局的$emit_name，存儲事件名

var EventEmitter2 = require('eventemitter2').EventEmitter2;

// 事件名，實例
const emitter = {}

// 創建實例，定義事件名
emitter.install = function(Vue){
  Vue.prototype.$emit_inst = new EventEmitter2()
  Vue.prototype.$emit_name = {
    "CHECK_TYPE_TWO": "checkTypeTwo",
    "ANOTHER_EVENT": "anotherEvt"
    // 繼續往後添加實例名
  }
}
export default emitter

第二步：使用插件

在main.js中，new Vue()命令創建實例之前，調用Vue.use()方法，使用插件

import emitter from "./emitter"
Vue.use(emitter)

第三步：在組件中使用eventemitter2

綁定事件

這裏使用的是，官方文檔的on方法，傳入eventName和回調，給實例綁事件，並定義回調函數。
同一個事件名，可以綁定多個事件回調，當事件被觸發時，會順序執行同名的回調函數

this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj => {
    this.value1 = Object.is(NaN,parseInt(obj.value))
    obj.type = this.value1 ? "success" : "warning"
    obj.msg = this.value1 ? "字符" : "數字"
    console.log("CHECK_TYPE_TWO第一次觸發")
})
this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj => {
    console.log("CHECK_TYPE_TWO第二次觸發")
})

觸發事件

事件的觸發和回調是同步執行的。執行過程，上面有說明。

this.$emit_inst.emit(this.$emit_name.CHECK_TYPE_TWO, obj)

移除事件

直接在實例上移除事件時，使用removeAllListeners方便，因爲只用傳事件名。

beforeDestroy(){
    this.$emit_inst.removeAllListeners(this.$emit_name.CHECK_TYPE_TWO)
}

總結：

使用eventemitter2，就是正確創建實例，給實例綁定、觸發和移除事件。
以上就是我要分享的內容，不足的地方還請大家多多指正。