File tree Expand file tree Collapse file tree 2 files changed +70
-0
lines changed Expand file tree Collapse file tree 2 files changed +70
-0
lines changed Original file line number Diff line number Diff line change @@ -114,6 +114,7 @@ const sidebar = {
114
114
'migration/array-refs' ,
115
115
'migration/async-components' ,
116
116
'migration/attribute-coercion' ,
117
+ 'migration/attrs-includes-class-style' ,
117
118
'migration/children' ,
118
119
'migration/custom-directives' ,
119
120
'migration/custom-elements-interop' ,
Original file line number Diff line number Diff line change
1
+ ---
2
+ title : class と style を含む $attrs
3
+ badges :
4
+ - breaking
5
+ ---
6
+
7
+ # ` class ` と ` style ` を含む ` $attrs ` <MigrationBadges :badges =" $frontmatter.badges " />
8
+
9
+ ## 概要
10
+
11
+ ` $attrs ` は、 ` class ` と ` style ` を含む、コンポーネントに渡されるすべての属性が含まれるようになりました。
12
+
13
+ ## 2.x の挙動
14
+
15
+ ` class ` と ` style ` 属性は、Vue 2 の仮想 DOM 実装でいくつかの特別な処理が行われます。そのため、他のすべての属性は含まれていますが、これらは ` $attrs ` に含まれていません。
16
+
17
+ この副作用は、 ` inheritAttrs: false ` を使用した場合に明らかになります:
18
+
19
+ - ` $attrs ` に含まれる属性は、自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に委ねられます。
20
+ - しかし、 ` class ` と ` style ` は、 ` $attrs ` の一部ではないので、コンポーネントのルート要素に適用されます:
21
+
22
+ ``` vue
23
+ <template>
24
+ <label>
25
+ <input type="text" v-bind="$attrs" />
26
+ </label>
27
+ </template>
28
+ <script>
29
+ export default {
30
+ inheritAttrs: false
31
+ }
32
+ </script>
33
+ ```
34
+
35
+ このような使い方をする場合:
36
+
37
+ ``` html
38
+ <my-component id =" my-id" class =" my-class" ></my-component >
39
+ ```
40
+
41
+ ...以下のHTMLが生成されます:
42
+
43
+ ``` html
44
+ <label class =" my-class" >
45
+ <input type =" text" id =" my-id" />
46
+ </label >
47
+ ```
48
+
49
+ ## 3.x の挙動
50
+
51
+ ` $attrs ` には、すべての属性が含まれているので、すべての属性を別の要素に適用することが簡単にできます。先ほどの例は、次のHTMLが生成されます:
52
+
53
+ ``` html
54
+ <label >
55
+ <input type =" text" id =" my-id" class =" my-class" />
56
+ </label >
57
+ ```
58
+
59
+ ## 移行方針
60
+
61
+ ` inheritAttrs: false ` を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に ` class ` や ` style ` の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。
62
+
63
+ ## 関連情報
64
+
65
+ - [ 関連する RFC] ( https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md )
66
+ - [ 移行ガイド - ` $listeners ` の削除] ( ./listeners-removed.md )
67
+ - [ 移行ガイド - 新しい Emits のオプション] ( ./emits-option.md )
68
+ - [ 移行ガイド - ` .native ` 修飾子の削除] ( ./v-on-native-modifier-removed.md )
69
+ - [ 移行ガイド - Render 関数 API の変更] ( ./render-function-api.md )
You can’t perform that action at this time.
0 commit comments