Vue3：$attrs包含class&style

$attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style。

$attrs

vue2.x

Vue 2 的虚拟 DOM 实现对 class 和 style attribute 有一些特殊处理。因此，与其它所有 attribute 不一样，它们没有被包含在 $attrs 中。
上述行为在使用 inheritAttrs: false 时会产生副作用：

• $attrs 中的 attribute 将不再被自动添加到根元素中，而是由开发者决定在哪添加。
• 但是 class 和 style 不属于 $attrs，它们仍然会被应用到组件的根元素中：

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

像这样使用时：

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

……将生成以下 HTML：

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

vue3.x

$attrs 包含了所有的 attribute，这使得把它们全部应用到另一个元素上变得更加容易了。现在上面的示例将生成以下 HTML：

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

• this.$attr：调用组件的时候通过自定义属性所传递的所有数据，包含class属性和style属性。
  • 当子组件只有一个唯一的根元素的时候，系统会将所有的自定义属性平移到组件视图的根元素上
  • 如果组件视图存在多个根元素，则不会处理