详解利用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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php 删除cookie方法详解
2014/12/01 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
表单提交验证类
2006/07/14 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
json数据的列循环示例
2013/09/06 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
django 信号调度机制详解
2019/07/19 Python
浅析PEP572: 海象运算符
2019/10/15 Python
出国留学自荐信
2013/10/25 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
工地门卫岗位职责
2013/12/30 职场文书
就业协议书怎么填
2014/04/11 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang