Skip to content

Commit 2de5a2f

Browse files
authored
Migration > Attrs Includes Class Style の翻訳を追従 (#238)
* Add an original document * Add sidebar menu * Replace with Japanese translation * fix: remove original line
1 parent 6a73c04 commit 2de5a2f

File tree

2 files changed

+70
-0
lines changed

2 files changed

+70
-0
lines changed

src/.vuepress/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ const sidebar = {
114114
'migration/array-refs',
115115
'migration/async-components',
116116
'migration/attribute-coercion',
117+
'migration/attrs-includes-class-style',
117118
'migration/children',
118119
'migration/custom-directives',
119120
'migration/custom-elements-interop',
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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)

0 commit comments

Comments
 (0)