File tree Expand file tree Collapse file tree 2 files changed +75
-0
lines changed Expand file tree Collapse file tree 2 files changed +75
-0
lines changed Original file line number Diff line number Diff line change @@ -128,6 +128,7 @@ const sidebar = {
128
128
'migration/global-api-treeshaking' ,
129
129
'migration/inline-template-attribute' ,
130
130
'migration/keycode-modifiers' ,
131
+ 'migration/listeners-removed' ,
131
132
'migration/props-default-this' ,
132
133
'migration/render-function-api' ,
133
134
'migration/slots-unification' ,
Original file line number Diff line number Diff line change
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 )
You can’t perform that action at this time.
0 commit comments