event emit 实现

简介: event emit 实现

事件中心

vm.$on

Vue.prototype.$on = function (event, fn) {
   
    const vm: Component = this
    if (Array.isArray(event)) {
   
        for (let i = 0, l = event.length; i < l; i++) {
   
            this.$on(event[i], fn)
        }
    } else {
   
        (vm._events[event] || (vm._events[event] = [])).push(fn)
    }
    return vm
}

vm.$emit

Vue.prototype.$emit = function (event: string): Component {
   
    const vm: Component = this
    let cbs = vm._events[event]
    if (cbs) {
   
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      for (let i = 0, l = cbs.length; i < l; i++) {
   
        try {
   
          cbs[i].apply(vm, args)
        } catch (e) {
   
          handleError(e, vm, `event handler for "${
     event}"`)
        }
      }
    }
    return vm
  }
}

vm.$off

Vue.prototype.$off = function (event, fn) {
   
    const vm: Component = this
    // all
    if (!arguments.length) {
   
        vm._events = Object.create(null)
        return vm
    }
    // array of events
    if (Array.isArray(event)) {
   
        for (let i = 0, l = event.length; i < l; i++) {
   
            this.$off(event[i], fn)
        }
        return vm
    }
    // specific event
    const cbs = vm._events[event]
    if (!cbs) {
   
        return vm
    }
    if (!fn) {
   
        vm._events[event] = null
        return vm
    }
    if (fn) {
   
        // specific handler
        let cb
        let i = cbs.length
        while (i--) {
   
            cb = cbs[i]
            if (cb === fn || cb.fn === fn) {
   
                cbs.splice(i, 1)
                break
            }
        }
    }
    return vm
}

vm.$once

Vue.prototype.$once = function (event, fn) {
   
    const vm: Component = this
    function on () {
   
        vm.$off(event, on)
        fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
}

https://vue-js.com/learn-vue/instanceMethods/event.html#_4-vm-once

相关文章
|
2月前
|
存储 人工智能 API
给大模型配个“外接硬盘”!RAG架构全解析:企业级知识库搭建的终极指南
AI博主详解RAG技术:为大模型“接外挂”,破解幻觉难题。拆解T5-RAG、FiD、RAR三大流派原理与实战,手把手教搭专属知识库助手,附低代码落地方案。(239字)
227 1
|
安全 Unix Linux
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
509 0
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
|
11月前
|
SQL 关系型数据库 大数据
数据同步平台,实现全链路同步与流通
杭州奥零数据科技有限公司成立于2023年,专注于数据中台业务,维护开源项目AllData并提供商业版解决方案。AllData提供数据集成、存储、开发、治理及BI展示等一站式服务,支持AI大模型应用,助力企业高效利用数据价值。
|
Ubuntu Linux
Fedora 36 ARM 镜像源更换与软件安装
Fedora 36是Linux发行版,由社区开发,红帽赞助。安装软件通常用DNF(RPM包)。若需安装.deb包,先用alien转换。遇到问题时,可删除`/etc/yum.repo.d`目录内容,改用阿里云镜像源,如: 简而言之,Fedora 36的软件安装涉及DNF或alien,镜像源更换解决安装问题,阿里云镜像提供速度优化。
991 9
自主定义访问路径-----SpringBoot自主定义静态资源访问路径的方法
自主定义访问路径-----SpringBoot自主定义静态资源访问路径的方法
|
数据可视化 安全 Cloud Native
AntV 你的保姆级数据可视化解决方案
AntV 你的保姆级数据可视化解决方案
2221 0
|
机器学习/深度学习 人工智能 编解码
《GAP8人工智能物联网芯片》:毫瓦级人脸识别 – 识别篇
人脸识别因在安全领域的不同应用(门锁,门禁,闸机等)而受到了学界,业界及媒体的广泛关注,同时人脸识别也可以被广泛应用于各种其他方案,如刷脸取纸,账户管理等等。设备可自动的使用者(区别于其他使用者)可以创造出完全不一样的用户体验,如人脸识别咖啡机可识别了解每个用户对不同咖啡的喜好程度,从而推荐或制作符合用户口味的咖啡。同时,咖啡供应商也可以根据结果进行更详细的市场分析,物流管控,生产调整等从而获得更高的利润。是否可以仅用数美金就让现有设备配备可以长期依赖电池运行的人脸识别功能? AliOS Things + GAP8让这一切可以轻松得以实现!
《GAP8人工智能物联网芯片》:毫瓦级人脸识别 – 识别篇
|
存储 云计算
阿里云分布式存储Pangu团队招人啦
阿里云-飞天-盘古是阿里云自研的分布式存储平台,承接了整个阿里云的存储业务,拥有海量的用户。因业务需求增加,诚邀广大志同道合者加入。
8124 0
|
前端开发 容器
HTML <div> 和<span>
HTML <div> 和<span>
1167 0
BXA
|
消息中间件 存储 Cloud Native
Spring Boot与 Kafka实现高吞吐量消息处理大规模数据问题
现代数据量越来越庞大对数据处理的效率提出了更高的要求。Apache Kafka是目前流行的分布式消息队列之一。Spring Boot是现代Java应用程序快速开发的首选框架。综合使用Spring Boot和Apache Kafka可以实现高吞吐量消息处理。
BXA
1040 0