Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

update listeners-removed.md #731

Merged
merged 2 commits into from
Sep 16, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/guide/migration/listeners-removed.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ badges:

## 概览

`$listeners` 对象在 Vue 3 中已被移除。现在事件监听器是 `$attrs` 的一部分:
`$listeners` 对象在 Vue 3 中已被移除。事件监听器现在是 `$attrs` 的一部分:

```js
{
text: 'this is an attribute',
onClose: () => console.log('close Event triggered')
text: '这是一个 attribute',
onClose: () => console.log('close 事件被触发')
}
```

## 2.x 语法

在 Vue 2 中,你可以使用 `this.$attrs` `this.$listeners` 分别访问传递给组件的 attribute 和事件监听器。结合 `inheritAttrs: false`,开发者可以将这些 attribute 和监听器应用到其它元素,而不是根元素
在 Vue 2 中,你可以通过 `this.$attrs` 访问传递给组件的 attribute,以及通过 `this.$listeners` 访问传递给组件的事件监听器。结合 `inheritAttrs: false`,开发者可以将这些 attribute 和监听器应用到根元素之外的其它元素

```html
<template>
Expand All @@ -36,7 +36,7 @@ badges:

## 3.x 语法

在 Vue 3 的虚拟 DOM 中,事件监听器现在只是以 `on` 为前缀的 attribute,这样就成了 `$attrs` 对象的一部分,因此 `$listeners` 被移除了。
在 Vue 3 的虚拟 DOM 中,事件监听器现在只是以 `on` 为前缀的 attribute,这样它就成为了 `$attrs` 对象的一部分,因此 `$listeners` 被移除了。

```vue
<template>
Expand All @@ -56,7 +56,7 @@ export default {
```js
{
id: 'my-input',
onClose: () => console.log('close Event triggered')
onClose: () => console.log('close 事件被触发')
}
```

Expand All @@ -69,7 +69,7 @@ export default {
## 参考

- [相关的 RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
- [迁移指南 - `$attrs` 包括 `class` 和 `style` ](./attrs-includes-class-style.md)
- [迁移指南 - `$attrs` 包含 `class` 和 `style` ](./attrs-includes-class-style.md)
- [迁移指南 - 渲染函数 API 的更改](./render-function-api.md)
- [迁移指南 - 新增 Emits 选项](./emits-option.md)
- [迁移指南 - 移除 `.native` 修饰符](./v-on-native-modifier-removed.md)