Vue <template> 标签 完整独立技术文档

一、文档定位

专门精讲 Vue 中 <template> 内置模板标签：

作用、特性、适用场景、正确用法、错误坑点、和 div 区别、搭配 v-if / v-for / 插槽 实战示例，纯干货可直接当笔记存档。

---

二、<template> 核心本质

1. 核心定义

<template> 是 Vue 提供的逻辑包裹容器

最大特点：

✅ 本身不会渲染成真实 DOM 元素

✅ 只会做逻辑分组，页面源码里看不见这个标签

✅ 不会产生多余节点、不会增加 DOM 层级

2. 通俗理解

你想用多个标签一起做：

• 条件判断 v-if

• 循环渲染 v-for

  但不想外面多套一层无用的 <div>

  就用 <template> 包起来。

3. 核心限制（必记）

1. <template> 不会生成真实 DOM
2. 不能加 class / style / id（写了无效）
3. 不能绑定点击事件 @click（无效）
4. 只能放指令 + 子元素，自身不渲染任何东西

---

三、用法 1：搭配 v-if /v-else 分组渲染

需求

多个标签同时判断显示 / 隐藏，不想外层多一个 div。

示例代码

vue

<template>
  <div class="box">
    <!-- 逻辑包裹，不生成额外DOM -->
    <template v-if="isLogin">
      <p>欢迎进入个人中心</p>
      <p>我的订单</p>
      <p>退出登录</p>
    </template>

    <template v-else>
      <p>请先登录账号</p>
      <p>前往注册</p>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isLogin = ref(false)
</script>

页面真实 DOM 结构

只会渲染 <p> 标签，没有 template 标签，也没有多余 div。

---

四、用法 2：搭配 v-for 批量循环多元素

需求

一次性循环输出多个同结构标签，不嵌套额外 div。

vue

<template>
  <div>
    <template v-for="item in list" :key="item.id">
      <span>{{ item.name }}</span>
      <span>{{ item.age }}</span>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const list = ref([
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 22 }
])
</script>

优势：循环多个标签，无多余父级 DOM 嵌套。

---

五、用法 3：插槽专用（最常用）

<template> 是 Vue 插槽语法标配标签

用于：具名插槽、作用域插槽。

1. 父组件使用具名插槽

vue

<!-- 父组件 -->
<Child>
  <template #header>
    <h3>我是头部插槽内容</h3>
  </template>

  <template #footer>
    <p>我是底部插槽内容</p>
  </template>
</Child>

2. 子组件定义插槽

vue

<!-- 子组件 Child.vue -->
<template>
  <slot name="header"></slot>
  <div>中间正文</div>
  <slot name="footer"></slot>
</template>

3. 作用域插槽必用 template

vue

<template>
  <Child>
    <template #default="scope">
      <p>拿到子组件数据：{{ scope.msg }}</p>
    </template>
  </Child>
</template>

插槽场景下，规范强制用 <template> 接收插槽。

---

六、<template> vs <div> 硬核对比

表格

对比项	<template>	<div>
是否生成真实 DOM	不生成，透明包裹	生成真实 div 节点
会不会增加层级	不增加 DOM 层级	多一层嵌套层级
能否加 class/style	无效	可以正常使用
能否绑定 @click 事件	无效	可以绑定
适用场景	逻辑分组、if/for、插槽	布局容器、样式容器、事件容器

什么时候必须用 template？

1. 多个标签共用 v-if，不想多套 div
2. 多个标签共用 v-for，不想冗余嵌套
3. 写插槽（具名 / 作用域）官方规范写法
4. Flex/Grid 布局，不能多加一层父容器 的场景

什么时候用 div 不用 template？

需要设置样式、布局、绑定事件、加 class，一律用 div。

---

七、常见错误用法（避坑）

错误 1：给 template 加 class /style

vue

<!-- 无效，完全不生效 -->
<template v-if="flag" class="box" style="color:red">
  <p>测试</p>
</template>

错误 2：给 template 绑点击事件

vue

<!-- 点击无效 -->
<template @click="handleClick">
  <p>点我</p>
</template>

错误 3：把 template 当布局容器

想用它做盒子包样式，绝对不行，请改用 div。

---

八、总结口诀

1. template 只做逻辑，不生成 DOM
2. 多标签 if/for，不用 div 就用它
3. 插槽语法必用 template
4. 要样式要事件，老老实实换 div
5. 透明包裹无冗余，布局千万别硬上

需要我给你写一个 template + v-if + v-for + 插槽 三合一完整综合案例，直接可以拿来练手吗？