详解利用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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
如何在vue中使用jointjs过程解析
May 29 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
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
个人充满哲理的自我评价
2014/02/20 职场文书
保密工作实施方案
2014/02/24 职场文书
贷款承诺书范文
2014/05/19 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
优秀团支部申报材料
2014/12/26 职场文书
母亲节感言
2015/08/03 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis