Question

Vue 2.x

在 2.x 中，由于不支持多根节点组件，许多组件被包裹在了一个 <div> 中。

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class 、 style 和 id attribute。可以通过 $attrs property 访问那些 attribute。

1. 当组件返回单个根节点时，非 prop 的 attribute 将默认自动添加到根节点的 attribute 中。

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

   禁用 attribute 继承的常见场景是需要将 attribute 应用于根节点之外的其他元素。

Vue 3.x

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

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