详解利用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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
多人战的战术与战略
2020/03/04 星际争霸
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php 删除cookie方法详解
2014/12/01 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
解决vue 引入子组件报错的问题
2018/09/06 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
vscode 远程调试python的方法
2017/12/01 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python 实现控制鼠标键盘
2020/11/27 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
三年级语文教学反思
2014/02/01 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
剪彩仪式主持词
2014/03/19 职场文书
优秀员工演讲稿
2014/05/19 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
军训结束新闻稿
2015/07/17 职场文书
职工宿舍管理制度
2015/08/05 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL