Skip to content

Commit

Permalink
Migration > v-on-native-modifier-removed の翻訳を追従 (#251)
Browse files Browse the repository at this point in the history
* feat: add migration guide > v-on.native modifier removed

* feat: add migration v-on.native modifier removed link

* docs: translate migration guide > v-on.native modifier removed
  • Loading branch information
naokie authored Apr 14, 2021
1 parent 2bb2e13 commit 5c63b27
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
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)

0 comments on commit 5c63b27

Please sign in to comment.