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 APIVue

杰~JIE

2429人浏览 · 2021-01-27 15:39:18

杰~JIE · 2021-01-27 15:39:18 发布

前言

本笔记主要基于官方文档《迁移策略—— 事件 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]

用法：

移除自定义事件监听器。