片段 (fragments)

vue3 现已正式支持多根节点组件，即片段。注: 该特性可能需要支持vue3大部分语法提示的相应编辑器插件 (如 vscode 插件 volar) 以避免错误警告

2.x

vue 2.x 版本中不支持组件有多个根节点，当误创建多个时，会引发警告。所以大部分情况下，创建一个组件都需要小心地确保把模板代码放在一个根节点如 <div> 里。

@/pages/40-lrn/20-vue3/30-fragments/components/LayoutInV2.vue

vue

<template>
    <div>
        <header>...</header>
        <main>...</main>
        <footer>...</footer>
    </div>
</template>

vue 3.x 版本中组件可包含多个根节点，只是需要明确定义组件属性应放在哪里。

@/pages/40-lrn/20-vue3/30-fragments/components/LayoutInV3.vue

vue

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