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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年03月19日 14时58分12秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
centos 开发php扩展,centos 安装php扩展redis
2019-04-21
cms 单点登录 php,Yii2 中实现单点登录的方法
2019-04-21
oracle自己运行,创建Oracle自动执行Job
2019-04-21
chmod 赋权所有_chmod 权限 命令详细用法
2019-04-21
html代码翻译_[译]您知道 HTML 的键盘标签吗?
2019-04-21
html抽奖代码_JavaScript高手之路:封装抽奖效果
2019-04-21
的流程图做完后如何保存_2019超火的半永久眉是哪款?做完后我们如何护理?...
2019-04-21
去除logo 高德地图api_深圳品牌logo升级如何保持原型的同时更具创新?
2019-04-21
二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定?
2019-04-21
python中倒背如流_八字基础知识--倒背如流篇
2019-04-21
以太坊地址和公钥_以太坊地址是什么
2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题
2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置
2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析
2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了!
2019-04-21