策略笔记—— 第10节:事件 API"/>
Vue 3 迁移策略笔记—— 第10节:事件 API
前言
本笔记主要基于官方文档《迁移策略—— 事件 API》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
知识储备
- 4个事件 API:
- Vue 3.x 的
emits
Option
概述
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节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第10节:事件 API
发布评论