VUE EventEmit实现
发布日期:2021-11-21 16:35:52 浏览次数:8 分类:技术文章

本文共 1242 字,大约阅读时间需要 4 分钟。

Vue里面用过eventBus作为通信方式,实现方式是用Vue函数的$on/$emit方法。

这种方式可以叫做发布订阅模式

class Event {    constructor() {    	// 创建一个事件对象          this.events = Object.create(null);        }      // 绑定事件      on(name, fn) {      	// 没有该事件? 初始化处理函数数组为空        if (!this.events[name]) {            this.events[name] = []          }          // 否则push一个事件,          this.events[name].push(fn);          // return 自身方便链式调用          return this;      }      // 通知事件      emit(name, ...args) {      //没有该事件?不执行        if (!this.events[name]) {            return this;        }        const fns = this.events[name]        //执行该事件对应的函数数组, 并传入参数        fns.forEach(fn => fn.call(this, ...args))        return this;      }      // 解绑事件      off(name,fn) {        if (!this.events[name]) {            return this;        }        // 没有指定解绑事件? 解绑所有        if (!fn) {           this.events[name] = null           return this        }        // 否则找到该事件,解绑        const index = this.events[name].indexOf(fn);        this.events[name].splice(index, 1);        return this;      }      // 单次绑定事件,执行完后解绑      once(name,fn) {        const only = () => {          fn.apply(this, arguments);          this.off(name, only);        };        this.on(name, only);        return this;      }  }

 

转载地址:https://blog.csdn.net/yyychocolate/article/details/108253296 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:栈 API push pop min实现
下一篇:script标签属性defer和async的作用

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年03月19日 14时58分12秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

centos 开发php扩展,centos 安装php扩展redis 2019-04-21
php+跑buth,php 中函数获取可变参数的方法, 这个语法有点像 golang 语言中的 2019-04-21
cms 单点登录 php,Yii2 中实现单点登录的方法 2019-04-21
oracle自己运行,创建Oracle自动执行Job 2019-04-21
oracle报错00020,oracle启动 ORA-00020: maximum number of processes (%s) exceeded错误 2019-04-21
chmod 赋权所有_chmod 权限 命令详细用法 2019-04-21
html代码翻译_[译]您知道 HTML 的键盘标签吗? 2019-04-21
html抽奖代码_JavaScript高手之路:封装抽奖效果 2019-04-21
hadoop 3.3 一直停留在running wordcount_蛋价持续下跌,今日跌破3.3元大关!深秋季节价格还能反弹吗?... 2019-04-21
的流程图做完后如何保存_2019超火的半永久眉是哪款?做完后我们如何护理?... 2019-04-21
去除logo 高德地图api_深圳品牌logo升级如何保持原型的同时更具创新? 2019-04-21
二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定? 2019-04-21
python中倒背如流_八字基础知识--倒背如流篇 2019-04-21
以太坊地址和公钥_以太坊地址是什么 2019-04-21
linux查看wifi信号命令_linux – 获取WIFI信号强度 – 寻求最佳方式(IOCTL,iwlist(iw)等)... 2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题 2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置 2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析 2019-04-21
onmessage websocket 收不到信息_WebSocket断开重连解决方案,心跳重连实践 2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了! 2019-04-21