Skip to content

Commit ea8aa4c

Browse files
fix: revise the migration guide for the emits option (#690)
1 parent 008ec9a commit ea8aa4c

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

Diff for: src/guide/migration/emits-option.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ badges:
88

99
## Overview
1010

11-
Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
11+
Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
1212

1313
## 2.x Behavior
1414

15-
In Vue 2, you can define the props that a component received, but you can't declare which events it can emit:
15+
In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit:
1616

17-
```html
17+
```vue
1818
<template>
1919
<div>
2020
<p>{{ text }}</p>
@@ -30,12 +30,14 @@ In Vue 2, you can define the props that a component received, but you can't decl
3030

3131
## 3.x Behavior
3232

33-
Similar to props, the events that the component emits can now be defined with the `emits` option.
33+
Similar to props, the events that the component emits can now be defined with the `emits` option:
3434

35-
```html
35+
```vue
3636
<template>
37-
<p>{{ text }}</p>
38-
<button v-on:click="$emit('accepted')">OK</button>
37+
<div>
38+
<p>{{ text }}</p>
39+
<button v-on:click="$emit('accepted')">OK</button>
40+
</div>
3941
</template>
4042
<script>
4143
export default {
@@ -45,28 +47,26 @@ Similar to props, the events that the component emits can now be defined with th
4547
</script>
4648
```
4749

48-
The option also accepts an object notation, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in props definitions.
50+
The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props` definitions.
4951

5052
For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits).
5153

5254
## Migration Strategy
5355

54-
It is highly recommended that you document all of the emitted events by your each of components this way because of the [removal of the `.native` modifier](./v-on-native-modifier-removed.md).
56+
It is highly recommended that you document all of the events emitted by each of your components using `emits`.
5557

56-
All events not defined with `emits` are now added as DOM event listeners to the component's root node (unless `inheritAttrs: false` has been set).
58+
This is especially important because of [the removal of the `.native` modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits` will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
5759

5860
### Example
5961

6062
For components that re-emit native events to their parent, this would now lead to two events being fired:
6163

6264
```vue
6365
<template>
64-
<p>{{ text }}</p>
6566
<button v-on:click="$emit('click', $event)">OK</button>
6667
</template>
6768
<script>
6869
export default {
69-
props: ['text'],
7070
emits: [] // without declared event
7171
}
7272
</script>
@@ -80,18 +80,18 @@ When a parent listens for the `click` event on the component:
8080

8181
it would now be triggered _twice_:
8282

83-
- Once from `$emit()`
84-
- Once from a native event listener applied to the root element
83+
- Once from `$emit()`.
84+
- Once from a native event listener applied to the root element.
8585

8686
Here you have two options:
8787

88-
1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`
88+
1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`.
8989
2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
9090

9191
## See also
9292

9393
- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
9494
- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
9595
- [Migration guide - `$listeners` removed](./listeners-removed.md)
96-
- [Migration guide - `$attrs` includes `class` & `style` ](./attrs-includes-class-style.md)
96+
- [Migration guide - `$attrs` includes `class` & `style`](./attrs-includes-class-style.md)
9797
- [Migration guide - Changes in the Render Functions API](./render-function-api.md)

0 commit comments

Comments
 (0)