Skip to content

Commit fef9b83

Browse files
authored
Migration > Listeners Removed の翻訳を追従 (#248)
* feat: add migration guide > listeners removed * docs: translate migration guide > listeners removed * fix: remove extra word
1 parent b50d859 commit fef9b83

File tree

2 files changed

+75
-0
lines changed

2 files changed

+75
-0
lines changed

src/.vuepress/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ const sidebar = {
128128
'migration/global-api-treeshaking',
129129
'migration/inline-template-attribute',
130130
'migration/keycode-modifiers',
131+
'migration/listeners-removed',
131132
'migration/props-default-this',
132133
'migration/render-function-api',
133134
'migration/slots-unification',
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: $listeners の削除
3+
badges:
4+
- breaking
5+
---
6+
7+
# `$listeners` の削除 <MigrationBadges :badges="$frontmatter.badges" />
8+
9+
## 概要
10+
11+
`$listeners` オブジェクトは Vue 3 で削除されました。イベントリスナは `$attrs` の一部になりました。
12+
13+
```javascript
14+
{
15+
text: 'this is an attribute',
16+
onClose: () => console.log('close Event triggered')
17+
}
18+
```
19+
20+
## 2.x での構文
21+
22+
Vue 2 では、コンポーネントに渡された属性は `this.$attrs` で、イベントリスナは `this.$listeners` でアクセスできます。
23+
`inheritAttrs: false` と組み合わせることで、開発者はこれらの属性やリスナを、ルート要素ではなく他の要素に適用することができます:
24+
25+
```html
26+
<template>
27+
<label>
28+
<input type="text" v-bind="$attrs" v-on="$listeners" />
29+
</label>
30+
</template>
31+
<script>
32+
export default {
33+
inheritAttrs: false
34+
}
35+
</script>
36+
```
37+
38+
## 3.x での構文
39+
40+
Vue 3 の仮想 DOM では、イベントリスナはプレフィックスに `on` がついた単なる属性になり、 `$attrs` オブジェクトの一部であるため、 `$listeners` は削除されました。
41+
42+
```vue
43+
<template>
44+
<label>
45+
<input type="text" v-bind="$attrs" />
46+
</label>
47+
</template>
48+
<script>
49+
export default {
50+
inheritAttrs: false
51+
}
52+
</script>
53+
```
54+
55+
もしこのコンポーネントが `id` 属性と `v-on:close` リスナを受け取った場合、 `$attrs` オブジェクトは次のようになります:
56+
57+
```javascript
58+
{
59+
id: 'my-input',
60+
onClose: () => console.log('close Event triggered')
61+
}
62+
```
63+
64+
## 移行の戦略
65+
66+
`$listeners` の使用をすべて削除します。
67+
68+
## 参照
69+
70+
- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
71+
- [移行ガイド - `class``style` を含む `$attrs`](./attrs-includes-class-style.md)
72+
- [移行ガイド - Render 関数 API](./render-function-api.md)
73+
- [移行ガイド - 新しい Emits のオプション](./emits-option.md)
74+
- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)

0 commit comments

Comments
 (0)