概述

当两个组件之间没有任何父子关系时，利用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

开发步骤：

• 添加模块 event_confg.js，用于存储eventEmitter2实例和事件名
• 添加模块 event_manager.js，封装实例绑定事件的方法和移除事件的方法
• 按照 绑定事件 =》 触发事件 =》 移除事件的步骤，使用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对象作为属性。

开发步骤：

使用install创建emitter.js插件，在其中给Vue添加全局属性

使用全局的Vue.use()方法，使用插件

按照 绑定事件 =》 触发事件 =》 移除事件的步骤，使用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，就是正确创建实例，给实例绑定、触发和移除事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。