如何让组件仅渲染内部HTML，不生成顶层<app-some-component>标签？

完全可以做到，不同Vue版本的实现方法如下：

Vue 3 实现方案 #

方案1：用渲染函数直接返回内容 #

定义组件时使用渲染函数，直接返回你需要的DOM结构，这样就不会生成<app-some-component>这个外层标签：

import { h } from 'vue'

export default {
  render() {
    return h('div', 'Top level div')
  }
}

如果用<script setup>语法，写法如下：

<script setup>
import { h } from 'vue'

export default {
  render() {
    return h('div', 'Top level div')
  }
}
</script>

方案2：用<template>作为根容器（单根元素场景） #

如果组件模板里用<template>包裹内部内容，Vue 3会自动跳过这个<template>标签，直接渲染里面的元素：

<template>
  <template>
    <div>Top level div</div>
  </template>
</template>

不过这种写法实用性不高，更推荐用渲染函数的方式。

Vue 2 实现方案 #

使用函数式组件，函数式组件本身不会生成额外的DOM节点，直接渲染内部内容：

<template functional>
  <div>Top level div</div>
</template>

也可以用JS代码定义：

export default {
  functional: true,
  render(h, context) {
    return h('div', 'Top level div')
  }
}

注意点 #

• 如果组件内部有多个根元素，Vue 2会自动用一个<div>包裹，Vue 3则用Fragment（不会生成可见DOM），但都不会出现组件自身的标签；不过要确保父元素能接受多个子节点。
• 这种方式下，直接写在组件标签上的class、style等属性不会自动传递到内部元素，需要手动在渲染函数里处理属性透传。

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