Vue中能否使用空<>标签？无父容器场景替代方案咨询

是否支持类似 React 的空标签 <>？ #

Vue 3 完全支持这种**片段（Fragment）**语法，和 React 的用法一致，直接用 <> 和 </> 包裹多根节点即可，不会渲染额外的 DOM 元素。

Vue 2 不支持直接使用空标签作为根节点包裹多个子元素，必须要有一个明确的父容器（比如 <div>）。

Vue 2 的替代方案 #

如果还在使用 Vue 2，有以下几种可行的替代方式：

1. 使用官方的 <template> 标签 #

<template> 作为容器时，不会被渲染成真实的 DOM 节点，仅起到包裹作用：

<template>
  <RadioGroup :default-value="placement" @change="setPlacement">
    <Stack direction="row" mb="4">
      <Radio value="top">Top</Radio>
      <Radio value="right">Right</Radio>
      <Radio value="bottom">Bottom</Radio>
      <Radio value="left">Left</Radio>
    </Stack>
  </RadioGroup>
  <RadioGroup :default-value="placement" @change="setPlacement">
    <Stack direction="row" mb="4">
      <Radio value="top">Top</Radio>
      <Radio value="right">Right</Radio>
      <Radio value="bottom">Bottom</Radio>
      <Radio value="left">Left</Radio>
    </Stack>
  </RadioGroup>
</template>

2. 自定义无渲染容器组件 #

创建一个仅渲染子节点的简单组件：

<!-- EmptyContainer.vue -->
<template>
  <slot></slot>
</template>

在需要的地方引入使用：

<EmptyContainer>
  <RadioGroup :default-value="placement" @change="setPlacement">
    <Stack direction="row" mb="4">
      <Radio value="top">Top</Radio>
      <Radio value="right">Right</Radio>
      <Radio value="bottom">Bottom</Radio>
      <Radio value="left">Left</Radio>
    </Stack>
  </RadioGroup>
  <RadioGroup :default-value="placement" @change="setPlacement">
    <Stack direction="row" mb="4">
      <Radio value="top">Top</Radio>
      <Radio value="right">Right</Radio>
      <Radio value="bottom">Bottom</Radio>
      <Radio value="left">Left</Radio>
    </Stack>
  </RadioGroup>
</EmptyContainer>

3. 语义化标签兜底 #

如果上述方式都不适用，可以用 <div>、<section> 等语义化标签作为父容器，虽然会多一层 DOM，但能满足基本语法要求。

内容的提问来源于stack exchange，提问作者3m1n3nc3