片段 & attribute

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

在 3.x 中，组件可以包含多个根节点！但是，这要求开发者显式定义 attribute 应该分布在哪里。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Attribute 继承

当组件返回单个根节点时，非 Props attribute 将自动添加到根节点的 attribute 中。

<!-- date-picker 组件 -->
</template>
  <div class="date-picker">
    <input type="datetime" />
  </div>
</template>

当使用的时候：

<date-picker data-status="activated"  @change="submitChange"></date-picker>

这些 非Props 的属性会被自动继承到组件上，会被渲染成：

<div class="date-picker" data-status="activated" @change="submitChange">
  <input type="datetime" />
</div>

禁用 Attribute 继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false

<!-- date-picker 组件 -->
</template>
  <div class="date-picker">
    <input type="datetime" />
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
}
</script>

那么，

<date-picker data-status="activated"  @change="submitChange"></date-picker>

<!-- 将被渲染成 -->
<div class="date-picker">
  <input type="datetime" />
</div>

但是，想继承的依然显示可以通过 v-bind="$attrs" 来显示继承，比如 date-picker 组件改为：

<!-- date-picker 组件 -->
</template>
  <div class="date-picker">
    <input type="datetime" v-bind="$attrs" />
  </div>
</template>

<!-- 之后 -->
<date-picker data-status="activated"  @change="submitChange"></date-picker>

<!-- 将被渲染成 -->
<div class="date-picker">
  <input type="datetime" data-status="activated"  @change="submitChange" />
</div>

所以，在Vue3中组件支持多个跟节点时，具有多个根节点的组件将不具有自动 attribute 回退行为。如果未显式绑定 $attrs，将发出运行时警告。