Skip to content

Migration > v-on-native-modifier-removed の翻訳を追従 #251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 14, 2021
Merged
Show file tree
Hide file tree
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
1 change: 1 addition & 0 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]
Expand Down
57 changes: 57 additions & 0 deletions src/guide/migration/v-on-native-modifier-removed.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: v-on.native 修飾子の削除
badges:
- breaking
---

# `v-on.native` 修飾子の削除 <MigrationBadges :badges="$frontmatter.badges" />

## 概要

`v-on` の `.native` 修飾子は削除されました。

## 2.x での構文

`v-on` でコンポーネントに渡されたイベントリスナは、デフォルトでは `this.$emit` でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 `.native` 修飾子を使用できます:

```html
<my-component
v-on:close="handleComponentEvent"
v-on:click.native="handleNativeClickEvent"
/>
```

## 3.x での構文

`v-on` の `.native` 修飾子は削除されました。同時に、 [新しい `emits` オプション](./emits-option.md) によって、子要素が実際に発行するイベントを定義できるようになりました。

その結果、 Vue は子コンポーネントの発行するイベントとして定義されて _いない_ すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました(ただし `inheritAttrs: false` が子のオプションで設定されていない場合)。

```html
<my-component
v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"
/>
```

`MyComponent.vue`

```html
<script>
export default {
emits: ['close']
}
</script>
```

## 移行の戦略

- `.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)