VUE3 复用模板片段 作者:马育民 • 2026-05-19 08:35 • 阅读:10000 [VUE 复用模板片段介绍](https://www.malaoshi.top/show_1GW3L2K0TmNP.html "VUE 复用模板片段介绍") # 官方为什么不实现复用模板 **复用模板** 的本质是:**同页面复用一段 HTML,不新建 .vue 文件** 1. **设计理念**:Vue 认定**组件是最小复用单元**,官方推崇复用就抽独立`.vue`组件,不认可页面内轻量片段复用为标准写法。 2. **避免语法泛滥**:不想新增专属``这类语法,防止模板语法臃肿、学习成本变高。 3. **编译与作用域麻烦**:内置原生复用模板要处理作用域、样式隔离、指令绑定、传参逻辑,开发维护成本高。 4. **已有平替兜底**:官方觉得**作用域插槽+component**、渲染函数、抽子组件,已经能覆盖所有复用场景,没必要重复造轮子。 5. **对标差异**:React 天生JSX一体,天然支持内部片段;Vue模板与脚本分离,从架构根源就没预留这种轻量化内复用设计。 ### 结论 所以网上各路大神用 **插槽、JSX、渲染函数、第三方库** 各自实现了一遍。 但都不是官方推荐的方式 # 第三方库 vue-reuse-template(推荐) 语法最优雅,详见:[VUE3 使用VueUse实现复用模板片段](https://www.malaoshi.top/show_1GW3L2KTQc9Q.html "VUE3 使用VueUse实现复用模板片段") # Vue3 原生插槽(最简单) ```vue {{ text }} ``` ✅ 不用装库 ✅ 不用 JSX ✅ 纯模板 ✅ Vue3 专用 --- # TSX 内联组件(传参方便) 需要修改工程配置 ``` ``` # JSX 内联组件(传参方便) 需要修改工程配置 ```vue ``` ✅ 传参超方便 ✅ 不用建文件 ✅ Vue3 原生支持 --- --- # 纯模板 Hack(不推荐) Vue2/Vue3 通用,不用库 ```vue {{ text }} 复用内容 {{ i }} ``` ✅ 全版本兼容 ❌ 写法丑 --- # 渲染函数 h()(不推荐) ```vue ``` ✅ 原生 ✅ 不用 JSX ❌ 写起来麻烦 --- # 动态组件 + 内联选项式组件(不推荐) ```vue ``` ✅ 纯模板字符串 ✅ 不用 JSX ✅ 不用建文件 原文出处:http://www.malaoshi.top/show_1GW3L1Mzhe94.html