diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index d4b7c0e3..54b59bba 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -135,6 +135,7 @@ const sidebar = { 'migration/suspense', 'migration/transition', 'migration/v-if-v-for', + 'migration/v-on-native-modifier-removed', 'migration/v-model', 'migration/v-bind', 'migration/watch' 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..a9a35af2 --- /dev/null +++ b/src/guide/migration/v-on-native-modifier-removed.md @@ -0,0 +1,57 @@ +--- +title: v-on.native 修飾子の削除 +badges: + - breaking +--- + +# `v-on.native` 修飾子の削除 + +## 概要 + +`v-on` の `.native` 修飾子は削除されました。 + +## 2.x での構文 + +`v-on` でコンポーネントに渡されたイベントリスナは、デフォルトでは `this.$emit` でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 `.native` 修飾子を使用できます: + +```html + +``` + +## 3.x での構文 + +`v-on` の `.native` 修飾子は削除されました。同時に、 [新しい `emits` オプション](./emits-option.md) によって、子要素が実際に発行するイベントを定義できるようになりました。 + +その結果、 Vue は子コンポーネントの発行するイベントとして定義されて _いない_ すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました(ただし `inheritAttrs: false` が子のオプションで設定されていない場合)。 + +```html + +``` + +`MyComponent.vue` + +```html + +``` + +## 移行の戦略 + +- `.native` 修飾子のすべてのインスタンスを削除します。 +- すべてのコンポーネントが、 `emits` オプションでイベントを記録するようにします。 + +## 参照 + +- [関連する 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)