惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
博客园 - 司徒正美
博客园 - 三生石上(FineUI控件)
博客园_首页
IT之家
IT之家
The Cloudflare Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Y
Y Combinator Blog
A
About on SuperTechFans
Microsoft Azure Blog
Microsoft Azure Blog
美团技术团队
S
SegmentFault 最新的问题
T
Tailwind CSS Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
M
MIT News - Artificial intelligence
WordPress大学
WordPress大学
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
小众软件
小众软件
有赞技术团队
有赞技术团队

时间的朋友

Windows 命令行密码重置 Anaconda安装 typescript 注解解读1 Konvajs Shape加载自定义图片 sshpass 使用 why-is-node-running webgl笔记 SharedArrayBuffer is not defined blender 常用快捷键 | 时间的朋友 vue -- v3.4commit提交记录2 vue2 升级vue3报错问题整理 着色器 expressjs 源码 hyper-V arch linux 网络配置 element input数字格式化 three 拼接货架 WebAudio笔记 Windows nginx重启bat脚本 vue -- v3.4commit提交记录 URI malformed vue3 -- Class 对象在组件中使用范例 | 时间的朋友 ruby 安装和升级 element-plus 老版本cascader使用卡死问题 vue3 内置Transition组件 | 时间的朋友 前端memo的实现 | 时间的朋友 Vue -- vue-class-component源码 | 时间的朋友 linux 优化脚本 typescript 装饰器 | 时间的朋友 microbundle 源码 | 时间的朋友 WSL2问题解决WslRegisterDistribution failed with error: 0x800701bc
事件总线EventBus | 时间的朋友
2021-11-01 · via 时间的朋友

Published: · LastMod: June 17, 2023 · 179 words

日常我们在vue开发的时候使用公共事件总线进行跨组建数据传递,这里我们自己封装一个事件总线,了解其背后的原理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyEvent {
    constructor() {
        this._eventMap = new Map()
    }


    on(event, callback) {
        if(event && typeof callback == 'function') {
            this._eventMap.has(event) || this._eventMap.set(event, []);
            this._eventMap.get(event).push(callback);
        }
        return this;
    }

    off(event, callback) {
        if(event) {
            if(typeof callback == 'function') {
                const callbacks = this._eventMap.get(event) || [];
                for(let i in callbacks) {
                    if(callbacks[i] === callback) {
                        callbacks.splice(i, 1);
                    }
                }
            } else {
                this._eventMap.delete(event)
            }

        }
        return this
    }

    once(event, callback) {

    }

    emit(event, ...args) {
        if(!this._eventMap.has(event)) return false;
        this._eventMap.get(event).map(callback => callback(...args))
        return true;
    }
}