VUE3 复用模板片段-马育民老师

[VUE 复用模板片段介绍](https://www.malaoshi.top/show_1GW3L2K0TmNP.html "VUE 复用模板片段介绍")

# 官方为什么不实现复用模板

**复用模板** 的本质是：**同页面复用一段 HTML，不新建 .vue 文件**

1. **设计理念**：Vue 认定**组件是最小复用单元**，官方推崇复用就抽独立`.vue`组件，不认可页面内轻量片段复用为标准写法。
2. **避免语法泛滥**：不想新增专属`<template-ref>`这类语法，防止模板语法臃肿、学习成本变高。
3. **编译与作用域麻烦**：内置原生复用模板要处理作用域、样式隔离、指令绑定、传参逻辑，开发维护成本高。
4. **已有平替兜底**：官方觉得**作用域插槽+component**、渲染函数、抽子组件，已经能覆盖所有复用场景，没必要重复造轮子。
5. **对标差异**：React 天生JSX一体，天然支持内部片段；Vue模板与脚本分离，从架构根源就没预留这种轻量化内复用设计。

### 结论

所以网上各路大神用 **插槽、JSX、渲染函数、第三方库** 各自实现了一遍。

但都不是官方推荐的方式

# 第三方库 vue-reuse-template（推荐）

语法最优雅，详见：[VUE3 使用VueUse实现复用模板片段](https://www.malaoshi.top/show_1GW3L2KTQc9Q.html "VUE3 使用VueUse实现复用模板片段")

# Vue3 原生插槽（最简单）

```vue
<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 内联组件（传参方便）

需要修改工程配置

```vue
<script setup lang="jsx">
const Item = ({ text }) => <p class="common">{text}</p>
</script>

<template>
  <Item text="第一段" />
  <Item text="第二段" />
</template>
```
✅ 传参超方便  
✅ 不用建文件  
✅ Vue3 原生支持

---

# 纯模板 Hack（不推荐）

Vue2/Vue3 通用，不用库

```vue
<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()（不推荐）

```vue
<script setup>
import { h } from 'vue'
const Item = (props) => h('p', { class: 'common' }, props.text)
</script>

<template>
  <Item text="第一段" />
  <Item text="第二段" />
</template>
```
✅ 原生  
✅ 不用 JSX  
❌ 写起来麻烦

---

# 动态组件 + 内联选项式组件（不推荐）
```vue
<script setup>
const Item = {
  props: ['text'],
  template: `<p class="common">{{ text }}</p>`
}
</script>

<template>
  <component :is="Item" text="第一段" />
</template>
```
✅ 纯模板字符串  
✅ 不用 JSX  
✅ 不用建文件

原文出处：http://www.malaoshi.top/show_1GW3L1Mzhe94.html