详解利用eventemitter2实现Vue组件通信
概述
当两个组件之间没有任何父子关系时，利用Vue标准的props传值和emit触发事件无法解决他们之间通信的问题。最近做的项目使用的是eventemitter2，来实现不相关组件之间的通信。这篇文章分享的是我对eventemitter2使用的总结和体会。
eventemitter2的npm文档大家可以看eventemitter2介绍。它是node.js提供的事件接口。安装如下
npminstall--saveeventemitter2
模块的EventEmitter2属性是一个构造函数，可以生成eventemitter2实例。实例定义了绑定、触发、移除事件的方法。本文涉及到的实例方法有on，off，emit，removeAllListeners，更多方法，大家可以去npm文档自行学习。
和其他事件处理机制一样，eventemitter2事件处理，必须包含三部分：
绑定事件=》触发事件=》移除事件
本次分享，主要讨论在vue项目中使用eventemitter2：
- 方法一：结合class模块化编程，对实例、事件名、绑定事件方法和移除事件方法做封装
- 方法二：结合vue插件开发，全局添加事件实例
方法一：结合class
开发步骤：
- 添加模块event_confg.js，用于存储eventEmitter2实例和事件名
- 添加模块event_manager.js，封装实例绑定事件的方法和移除事件的方法
- 按照绑定事件=》触发事件=》移除事件的步骤，使用eventeitter2
第一步：创建event_confg.js
varEventEmitter2=require('eventemitter2').EventEmitter2;
//emiter中定义的是eventemitter2实例，config中定义的是事件名
consteventConfig={}
eventConfig.emitter=newEventEmitter2()
eventConfig.config={
"CHECK_CHANGES":"checkChanges"
//更多的事件名，往这里添加
}
exportdefaulteventConfig
第二步：创建event_manager.js
此模块创建的是一个类，传入eventemitter2实例后，对实例的添加和移除事件的方法做了封装。
这里绑定和移除事件，分别用了on，off方法。
exportdefaultclass{
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
绑定事件
同一个事件名，可以绑定多个事件回调，当事件被触发时，会顺序执行同名的回调函数
importEventManagerfrom"@/utils/event_manager.js"
importeventConfigfrom"@/utils/event_config.js"
...
//初始化event_manager实例
this.evtManagerInst=newEventManager(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弹框
importeventConfigfrom"@/utils/event_config.js"
...
//传给事件回调函数的参数
letobj={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，存储事件名
varEventEmitter2=require('eventemitter2').EventEmitter2;
//事件名，实例
constemitter={}
//创建实例，定义事件名
emitter.install=function(Vue){
Vue.prototype.$emit_inst=newEventEmitter2()
Vue.prototype.$emit_name={
"CHECK_TYPE_TWO":"checkTypeTwo",
"ANOTHER_EVENT":"anotherEvt"
//继续往后添加实例名
}
}
exportdefaultemitter
第二步：使用插件
在main.js中，newVue()命令创建实例之前，调用Vue.use()方法，使用插件
importemitterfrom"./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，就是正确创建实例，给实例绑定、触发和移除事件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。