# class と style を含む $attrs
breaking
# 概要
$attrs は、 class と style を含む、コンポーネントに渡されるすべての属性が含まれるようになりました。
# 2.x の挙動
class と style 属性は、Vue 2 の仮想 DOM 実装でいくつかの特別な処理が行われます。そのため、他のすべての属性は含まれていますが、これらは $attrs に含まれていません。
この副作用は、 inheritAttrs: false を使用した場合に明らかになります:
$attrsに含まれる属性は、自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に委ねられます。- しかし、
classとstyleは、$attrsの一部ではないので、コンポーネントのルート要素に適用されます:
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
このような使い方をする場合:
<my-component id="my-id" class="my-class"></my-component>
1
...以下の HTML が生成されます:
<label class="my-class">
<input type="text" id="my-id" />
</label>
1
2
3
2
3
# 3.x の挙動
$attrs には、すべての属性が含まれているので、すべての属性を別の要素に適用することが簡単にできます。先ほどの例は、次の HTML が生成されます:
<label>
<input type="text" id="my-id" class="my-class" />
</label>
1
2
3
2
3
# 移行の戦略
inheritAttrs: false を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に class や style の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。
移行ビルドのフラグ: INSTANCE_ATTRS_CLASS_STYLE