跳至内容

$attrs 包含 classstyle
重大变更

概述

$attrs 现在包含传递给组件的所有属性,包括 classstyle

2.x 行为

classstyle 属性在 Vue 2 虚拟 DOM 实现中有一些特殊处理。因此,它们不包含在 $attrs 中,而所有其他属性则包含在内。

使用 inheritAttrs: false 时,会产生一个副作用。

  • $attrs 中的属性不再自动添加到根元素,而是由开发者决定在哪里添加它们。
  • classstyle 由于不属于 $attrs,因此仍将应用于组件的根元素。
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 的组件中,确保样式仍然按预期工作。如果您之前依赖于 classstyle 的特殊行为,一些视觉效果可能会被破坏,因为这些属性现在可能被应用于另一个元素。

迁移构建标志:INSTANCE_ATTRS_CLASS_STYLE

另请参阅