`$attrs` が `class` と `style` を包含
破壊的変更

概要

class や style を含む、コンポーネントに渡されたすべての属性が $attrs に含まれるようになりました。

2.x の動作

class と style 属性は、Vue 2 の仮想 DOM の実装で特別な処理を受けます。そのため、これらは $attrs には含まれず、他の属性はすべて含まれます。

この副作用は、inheritAttrs: false を使用したときに現れます:

$attrs 内の属性は自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に任されます。
しかし、$attrs に含まれない class と style は、今までどおりコンポーネントのルート要素に適用されます：

vue

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

次のように使用すると:

html

<my-component id="my-id" class="my-class"></my-component>

... 以下のような HTML を生成します:

html

<label class="my-class">
  <input type="text" id="my-id" />
</label>

3.x の動作

$attrs にはすべての属性が含まれるので、すべての属性を別の要素に適用することが容易になります。先ほどの例では、次のような HTML が生成されるようになりました:

html

<label>
  <input type="text" id="my-id" class="my-class" />
</label>

移行手順

inheritAttrs: false を使用しているコンポーネントでは、スタイリングが意図したとおりになっていることを確認してください。これまで class と style の特別な動作に依存していた場合、これらの属性が別の要素に適用される可能性があるため、一部のビジュアルが崩れるかも知れません。

移行ビルドのフラグ: INSTANCE_ATTRS_CLASS_STYLE

$attrs が class と style を包含 破壊的変更 ​

概要 ​

2.x の動作 ​

3.x の動作 ​

移行手順 ​

参照 ​

`$attrs` が `class` と `style` を包含
破壊的変更

概要

2.x の動作

3.x の動作

移行手順

参照