官方为什么不实现复用模板
复用模板 的本质是：同页面复用一段 HTML，不新建 .vue 文件
- 设计理念：Vue 认定组件是最小复用单元，官方推崇复用就抽独立
.vue组件，不认可页面内轻量片段复用为标准写法。 - 避免语法泛滥：不想新增专属
<template-ref>这类语法，防止模板语法臃肿、学习成本变高。 - 编译与作用域麻烦：内置原生复用模板要处理作用域、样式隔离、指令绑定、传参逻辑，开发维护成本高。
- 已有平替兜底：官方觉得作用域插槽+component、渲染函数、抽子组件，已经能覆盖所有复用场景，没必要重复造轮子。
- 对标差异：React 天生JSX一体，天然支持内部片段；Vue模板与脚本分离，从架构根源就没预留这种轻量化内复用设计。
结论
所以网上各路大神用 插槽、JSX、渲染函数、第三方库 各自实现了一遍。
但都不是官方推荐的方式
第三方库 vue-reuse-template（推荐）
语法最优雅，详见：VUE3 使用VueUse实现复用模板片段
Vue3 原生插槽（最简单）
<template>
<template #item="{ text }">
<p class="common">{{ text }}</p>
</template>
<component :is="$slots.item" text="第一段" />
<component :is="$slots.item" text="第二段" />
</template>
✅ 不用装库
✅ 不用 JSX
✅ 纯模板
✅ Vue3 专用
TSX 内联组件（传参方便）
需要修改工程配置
<script lang="ts" setup>
// 这就是 TSX —— 自带类型提示！
const ReuseP = (props: { content: string; className?: string }) => (
<p class={`common ${props.className || ''}`}>
{props.content}
</p>
)
</script>
<template>
<ReuseP content="你好" className="red" />
<ReuseP content="世界" className="blue" />
</template>
JSX 内联组件（传参方便）
需要修改工程配置
<script setup lang="jsx">
const Item = ({ text }) => <p class="common">{text}</p>
</script>
<template>
<Item text="第一段" />
<Item text="第二段" />
</template>
✅ 传参超方便
✅ 不用建文件
✅ Vue3 原生支持
纯模板 Hack（不推荐）
Vue2/Vue3 通用，不用库
<template>
<template v-if="0" id="item">
<p class="common">{{ text }}</p>
</template>
<template v-for="(_, i) in [1,2]">
<p class="common">复用内容 {{ i }}</p>
</template>
</template>
✅ 全版本兼容
❌ 写法丑
渲染函数 h()（不推荐）
<script setup>
import { h } from 'vue'
const Item = (props) => h('p', { class: 'common' }, props.text)
</script>
<template>
<Item text="第一段" />
<Item text="第二段" />
</template>
✅ 原生
✅ 不用 JSX
❌ 写起来麻烦
动态组件 + 内联选项式组件（不推荐）
<script setup>
const Item = {
props: ['text'],
template: `<p class="common">{{ text }}</p>`
}
</script>
<template>
<component :is="Item" text="第一段" />
</template>
✅ 纯模板字符串
✅ 不用 JSX
✅ 不用建文件