详解利用eventemitter2实现Vue组件通信


Posted in Javascript onNovember 04, 2019

概述

当两个组件之间没有任何父子关系时,利用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对象作为属性。

开发步骤:

  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,就是正确创建实例,给实例绑定、触发和移除事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Underscore源码分析
Dec 30 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 #Javascript
JavaScript判断浏览器版本的方法
Nov 03 #Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 #Javascript
如何正确理解vue中的key详解
Nov 02 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP多进程编程实例
2014/10/15 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
浅谈js中的bind
2019/03/18 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Cython 三分钟入门教程
2009/09/17 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python 多进程、多线程效率对比
2020/11/19 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
工业设计专业推荐信
2013/10/29 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
绿色环保演讲稿
2014/05/10 职场文书
平安家庭事迹材料
2014/12/20 职场文书
python之django路由和视图案例教程
2021/07/26 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis