VUE 复用模板片段介绍

介绍

Vue 复用模板片段,就是在同一个组件内,把一段 HTML/模板逻辑只写一次,然后在多处重复渲染,不用拆成独立组件,也不用重复拷贝代码。

概念

  • 模板片段:一段可复用的 HTML 结构(含指令、插值)。
  • 复用:一次定义,多次渲染,支持传参。
  • 优势:
    • ✅ 不拆独立组件,直接访问当前组件作用域(不用 props/emit)。
    • ✅ 减少重复代码,改一处全生效。
    • ✅ 不增加额外 DOM 节点。

Vue3 主流方案

VueUse 提供 createReusableTemplate,返回一对组件:

  • <DefineTemplate>:定义模板(不渲染,仅注册)。
  • <ReuseTemplate>:复用模板(真正渲染,可传参)。

Vue2 传统方案

Vue2 无 createReusableTemplate,可用 <template> 标签结合插槽模拟

局限性:Vue2 原生支持弱,不如 VueUse 简洁。

与独立组件的区别

特性 复用模板片段 独立组件
作用域 同组件,直接访问数据 需 props/emit 传参
DOM 节点 无额外节点 有组件根节点
适用场景 组件内多处重复 跨组件复用

原文出处:/show_1GW3L2K0TmNP.html