Vue组件模板何时无需使用div容器？

过去Vue组件模板若包含多个根节点会报错提示template must have a single child，比如下面的代码就不合法：

<template>
  <div>hello</div>
  <div>world</div>
</template>

如今这种写法已被支持，组件会直接渲染多个独立的根元素，且这些元素会继承父组件的布局行为（比如父组件使用display: grid时，组件的根元素会直接参与网格布局）。以下是几种适合去掉外层包裹<div>、让父组件直接控制内部元素的场景：

• 适配父组件布局系统：当组件需要融入父组件的Grid、Flex等布局时，外层<div>会额外增加嵌套层级，破坏布局结构。比如父组件是网格容器，希望组件的多个子元素直接作为网格项排列，去掉外层容器后，这些元素能直接参与网格布局，避免干扰布局计算。
• 表单控件组封装：封装标签、输入框、提示文本这类表单相关元素时，外层<div>可能影响表单的默认样式或验证逻辑。去掉外层容器后，这些表单元素可直接被父组件的表单样式或验证逻辑控制，保持表单结构的原生性。
• 文本与图标组合组件：对于包含图标和文字的组件，去掉外层容器后，父组件能直接控制两者的对齐方式（比如用Flex的align-items调整垂直对齐），避免外层<div>带来的额外间距或样式冲突。
• 列表项组件开发：如果组件用于渲染列表项，且项本身包含多个独立元素（比如左侧图标、中间文本、右侧按钮），不用外层<div>的话，这些元素可直接作为列表容器的子元素，继承列表的hover效果、内边距等样式，避免嵌套导致的样式穿透问题。
• 原生组件扩展：当组件是对原生元素的扩展（比如自定义按钮组、导航项），去掉外层容器能让组件根元素保留原生特性，父组件可直接通过原生选择器或API控制这些元素，比如给按钮组的每个按钮单独设置:focus状态样式。

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