利用eventemitter2实现Vue组件通信

2019-11-03 admin

概述

当两个组件之间没有任何父子关系时,利用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

开发步骤:

  1. 添加模块 event_confg.js,用于存储eventEmitter2实例和事件名
  2. 添加模块 event_manager.js,封装实例绑定事件的方法和移除事件的方法
  3. 按照 绑定事件 =》 触发事件 =》 移除事件的步骤,使用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,就是正确创建实例,给实例绑定、触发和移除事件。 以上就是我要分享的内容,不足的地方还请大家多多指正。

[转载]原文链接:https://segmentfault.com/a/1190000020893727

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78801.html

文章标题:利用eventemitter2实现Vue组件通信

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
回到顶部