概述
当两个组件之间没有任何父子关系时,利用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
上面引入eventemitter2模块的方法,除了用require,也可以用import
import eventemitter2 from "eventemitter2"
eventConfig.emitter = new eventemitter2.EventEmitter2()
第二步: 创建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,就是正确创建实例,给实例绑定、触发和移除事件。
以上就是我要分享的内容,不足的地方还请大家多多指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。