File tree Expand file tree Collapse file tree 2 files changed +58
-0
lines changed Expand file tree Collapse file tree 2 files changed +58
-0
lines changed Original file line number Diff line number Diff line change @@ -135,6 +135,7 @@ const sidebar = {
135
135
'migration/suspense' ,
136
136
'migration/transition' ,
137
137
'migration/v-if-v-for' ,
138
+ 'migration/v-on-native-modifier-removed' ,
138
139
'migration/v-model' ,
139
140
'migration/v-bind' ,
140
141
'migration/watch'
Original file line number Diff line number Diff line change
1
+ ---
2
+ title : v-on.native 修飾子の削除
3
+ badges :
4
+ - breaking
5
+ ---
6
+
7
+ # ` v-on.native ` 修飾子の削除 <MigrationBadges :badges =" $frontmatter.badges " />
8
+
9
+ ## 概要
10
+
11
+ ` v-on ` の ` .native ` 修飾子は削除されました。
12
+
13
+ ## 2.x での構文
14
+
15
+ ` v-on ` でコンポーネントに渡されたイベントリスナは、デフォルトでは ` this.$emit ` でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 ` .native ` 修飾子を使用できます:
16
+
17
+ ``` html
18
+ <my-component
19
+ v-on:close =" handleComponentEvent"
20
+ v-on:click.native =" handleNativeClickEvent"
21
+ />
22
+ ```
23
+
24
+ ## 3.x での構文
25
+
26
+ ` v-on ` の ` .native ` 修飾子は削除されました。同時に、 [ 新しい ` emits ` オプション] ( ./emits-option.md ) によって、子要素が実際に発行するイベントを定義できるようになりました。
27
+
28
+ その結果、 Vue は子コンポーネントの発行するイベントとして定義されて _ いない_ すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました(ただし ` inheritAttrs: false ` が子のオプションで設定されていない場合)。
29
+
30
+ ``` html
31
+ <my-component
32
+ v-on:close =" handleComponentEvent"
33
+ v-on:click =" handleNativeClickEvent"
34
+ />
35
+ ```
36
+
37
+ ` MyComponent.vue `
38
+
39
+ ``` html
40
+ <script >
41
+ export default {
42
+ emits: [' close' ]
43
+ }
44
+ </script >
45
+ ```
46
+
47
+ ## 移行の戦略
48
+
49
+ - ` .native ` 修飾子のすべてのインスタンスを削除します。
50
+ - すべてのコンポーネントが、 ` emits ` オプションでイベントを記録するようにします。
51
+
52
+ ## 参照
53
+
54
+ - [ 関連する RFC] ( https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough )
55
+ - [ 移行ガイド - 新しい Emits のオプション] ( ./emits-option.md )
56
+ - [ 移行ガイド - ` $listeners ` の削除] ( ./listeners-removed.md )
57
+ - [ 移行ガイド - Render 関数 API] ( ./render-function-api.md )
You can’t perform that action at this time.
0 commit comments