VUE 复用模板片段介绍 作者：马育民 • 2026-05-19 10:07 • 阅读：10000 # 介绍 Vue 复用模板片段，就是**在同一个组件内，把一段 HTML/模板逻辑只写一次，然后在多处重复渲染**，不用拆成独立组件，也不用重复拷贝代码。 # 概念 - **模板片段**：一段可复用的 HTML 结构（含指令、插值）。 - **复用**：一次定义，多次渲染，支持传参。 - **优势**： - ✅ 不拆独立组件，**直接访问当前组件作用域**（不用 props/emit）。 - ✅ 减少重复代码，**改一处全生效**。 - ✅ 不增加额外 DOM 节点。 # Vue3 主流方案 VueUse 提供 `createReusableTemplate`，返回一对组件： - `<DefineTemplate>`：**定义模板**（不渲染，仅注册）。 - `<ReuseTemplate>`：**复用模板**（真正渲染，可传参）。 # Vue2 传统方案 Vue2 无 `createReusableTemplate`，可用 `<template>` 标签结合插槽模拟 局限性：Vue2 原生支持弱，不如 VueUse 简洁。 # 与独立组件的区别 | 特性 | 复用模板片段 | 独立组件 | |---|---|---| | 作用域 | 同组件，直接访问数据 | 需 props/emit 传参 | | DOM 节点 | 无额外节点 | 有组件根节点 | | 适用场景 | 组件内多处重复 | 跨组件复用 | 原文出处：http://malaoshi.top/show_1GW3L2K0TmNP.html