Vue 3 迁移策略笔记—— 第10节：事件 API

前言

本笔记主要基于官方文档《迁移策略—— 事件 API》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

知识储备

• 4个事件 API:
• Vue 3.x 的 emitsOption

概述

Vue 3.x 移除了$on、$off和$once这三个事件相关的API。在 Vue 3.x 中，不再支持事件发射器接口(the event emitter interface).

Vue 2.x 的四个 Events API

Vue 2.x 可以通过 event emitter(事件发射器) api 强制附加事件触发处理程序。简单来说，就是可以随意注册一个事件监听事件，在任何地方都可以触发这个事件。实现这个功能的API有四个：

• 事件注册 Api:

  vm.$on( event, callback )

  • 参数：

    • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
    • {Function} callback

  • 用法：

    监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

  vm.$once( event, callback )

  • 参数：

    • {string} event
    • {Function} callback

  • 用法：

    监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

• 事件触发 APi:

  vm.$emit( eventName, […args] )

  • 参数：

    • {string} eventName
    • [...args]

    触发当前实例上的事件。附加参数都会传给监听器回调。

• 事件注销 API:

  vm.$off( [event, callback] )

  • 参数：

    • {string | Array<string>} event (只在 2.2.2+ 支持数组)
    • {Function} [callback]

  • 用法：

    移除自定义事件监听器。

这四个 API，常用来实现事件总线。

Vue 3.x 移除$on、$off、$once

在 Vue 3.x 中，将不再支持$on、$off、$once这三个api。但是$emit并没有被移除，因为它用于触发由父组件声明式添加的事件处理函数。

因为$on、$off、$once在 Vue 3.x 中不再被支持。所以，像 Vue 2.x 那样使用事件总线是不行的。但是，我们可以使用外部库来实现事件总线。例如： mitt or tiny-emitter.

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听