共计 3692 个字符，预计需要花费 10 分钟才能阅读完成。
概述
当两个组件之间没有任何父子关系时，利用 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，就是正确创建实例，给实例绑定、触发和移除事件。
以上就是我要分享的内容，不足的地方还请大家多多指正。
