乐趣区

利用eventemitter2实现Vue组件通信

jiezi

概述

当两个组件之间没有任何父子关系时，利用 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，就是正确创建实例，给实例绑定、触发和移除事件。
以上就是我要分享的内容，不足的地方还请大家多多指正。

退出移动版