From b7cc642b301d6bb9be5d2ee0af65dbc9f1657984 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 09:02:08 +0900 Subject: [PATCH 1/3] feat: add migration guide > v-on.native modifier removed --- .../migration/v-on-native-modifier-removed.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/guide/migration/v-on-native-modifier-removed.md diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md new file mode 100644 index 00000000..fcaffe08 --- /dev/null +++ b/src/guide/migration/v-on-native-modifier-removed.md @@ -0,0 +1,57 @@ +--- +title: v-on.native modifier removed +badges: + - breaking +--- + +# `v-on.native` modifier removed + +## Overview + +The `.native` modifier for `v-on` has been removed. + +## 2.x Syntax + +Event listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used: + +```html + +``` + +## 3.x Syntax + +The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](./emits-option.md) allows the child to define which events it does indeed emit. + +Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false` has been set in the child's options). + +```html + +``` + +`MyComponent.vue` + +```html + +``` + +## Migration Strategy + +- remove all instances of the `.native` modifier. +- ensure that all your components document their events with the `emits` option. + +## See also + +- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough) +- [Migration guide - New Emits Option](./emits-option.md) +- [Migration guide - `$listeners` removed](./listeners-removed.md) +- [Migration guide - Changes in the Render Functions API](./render-function-api.md) From d6727db277f41ef2f9faef975ca28e2249725c80 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 09:04:17 +0900 Subject: [PATCH 2/3] feat: add migration v-on.native modifier removed link --- src/.vuepress/config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index d7de58d0..03e4cada 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -134,6 +134,7 @@ const sidebar = { 'migration/suspense', 'migration/transition', 'migration/v-if-v-for', + 'migration/v-on-native-modifier-removed', 'migration/v-model', 'migration/v-bind' ] From 53380317cb739ffba3dcedf56b84ec063b21369a Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 20:24:19 +0900 Subject: [PATCH 3/3] docs: translate migration guide > v-on.native modifier removed --- .../migration/v-on-native-modifier-removed.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md index fcaffe08..a9a35af2 100644 --- a/src/guide/migration/v-on-native-modifier-removed.md +++ b/src/guide/migration/v-on-native-modifier-removed.md @@ -1,18 +1,18 @@ --- -title: v-on.native modifier removed +title: v-on.native 修飾子の削除 badges: - breaking --- -# `v-on.native` modifier removed +# `v-on.native` 修飾子の削除 -## Overview +## 概要 -The `.native` modifier for `v-on` has been removed. +`v-on` の `.native` 修飾子は削除されました。 -## 2.x Syntax +## 2.x での構文 -Event listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used: +`v-on` でコンポーネントに渡されたイベントリスナは、デフォルトでは `this.$emit` でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 `.native` 修飾子を使用できます: ```html ``` -## 3.x Syntax +## 3.x での構文 -The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](./emits-option.md) allows the child to define which events it does indeed emit. +`v-on` の `.native` 修飾子は削除されました。同時に、 [新しい `emits` オプション](./emits-option.md) によって、子要素が実際に発行するイベントを定義できるようになりました。 -Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false` has been set in the child's options). +その結果、 Vue は子コンポーネントの発行するイベントとして定義されて _いない_　すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました（ただし `inheritAttrs: false` が子のオプションで設定されていない場合）。 ```html ``` -## Migration Strategy +## 移行の戦略 -- remove all instances of the `.native` modifier. -- ensure that all your components document their events with the `emits` option. +- `.native` 修飾子のすべてのインスタンスを削除します。 +- すべてのコンポーネントが、 `emits` オプションでイベントを記録するようにします。 -## See also +## 参照 -- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough) -- [Migration guide - New Emits Option](./emits-option.md) -- [Migration guide - `$listeners` removed](./listeners-removed.md) -- [Migration guide - Changes in the Render Functions API](./render-function-api.md) +- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough) +- [移行ガイド - 新しい Emits のオプション](./emits-option.md) +- [移行ガイド - `$listeners` の削除](./listeners-removed.md) +- [移行ガイド - Render 関数 API](./render-function-api.md)