Vue.js: 插槽 slots

最后更新：2026-10-20

插槽（Slot）是 Vue 的内容分发 API——父组件可以往子组件的"槽位"插入任意内容。插槽让组件像"模板"一样灵活：父组件控制显示什么，子组件控制显示在哪里。

Vue 3 提供了 3 种插槽：默认插槽、具名插槽、作用域插槽。本课帮你掌握这 3 种用法和最佳实践。

相关模板与辅助：useSlots()

1. 你将学到

• 默认插槽 <slot /> 的基本用法
• 具名插槽 <slot name="header" /> 和 v-slot:header 简写
• 作用域插槽：子组件传数据给父组件插槽
• <template v-slot> 语法（Vue 2.6+）
• 动态插槽名和缩写语法
• 默认插槽内容（fallback content）
• $slots / useSlots 钩子

2. 一个 Card 组件无法定制内容的难题

(1) 痛点：5 种 Card 样式，要写 5 个组件

Alice 的电商后台需要 5 种卡片：

<!-- ❌ 翻车版：5 个组件 -->
<!-- ProductCard.vue -->
<div class="card">{{ product.name }}</div>

<!-- UserCard.vue -->
<div class="card">{{ user.name }}</div>

<!-- OrderCard.vue -->
<div class="card">Order #{{ order.id }}</div>

<!-- 5 个组件，90% 代码相同，只有内容不同 -->

产品经理 Charlie：

"Alice，下周还要加 5 种卡片类型。不能一直加新组件。我们需要一个灵活的 Card，能接收任何内容。"

(2) Vue 插槽解法：1 个 BaseCard，父组件塞内容

1 个 BaseCard.vue → 无限种卡片。每次新增只需写内容，不用改组件。

(3) 收益

使用插槽后：

• 组件数：5 → 1（-80%）
• 新增卡片类型：1 行模板代码
• 维护成本：改 1 处样式，5+ 卡片同步更新
• 可复用性：BaseCard 可用于所有卡片场景

3. 默认插槽

(1) 基本用法

渲染结果：

<div class="card">
  <h3>Hello</h3>
  <p>This is the card content</p>
</div>

(2) 默认内容（fallback）

<!-- 父组件不传内容 -->
<BaseCard />

<!-- 渲染：<p>No content provided</p> -->

<!-- 父组件传内容 -->
<BaseCard>
  <p>Custom content</p>
</BaseCard>

<!-- 渲染：<p>Custom content</p>（覆盖默认）-->

(3) 5 大使用场景

4. 具名插槽

(1) 定义具名插槽

(2) 父组件使用（3 种语法）

(3) 动态插槽名

(4) 检测插槽存在

5. 作用域插槽

(1) 核心：子组件传数据给父组件插槽

渲染结果：

<ul>
  <li><p>1. Alice (alice@example.com)</p></li>
  <li><p>2. Bob (bob@example.com)</p></li>
  <li><p>3. Charlie (charlie@example.com)</p></li>
</ul>

(2) 5 种作用域插槽模式

(3) 完整示例：可定制列表

▶ 示例：作用域插槽（DataTable 自定义列）

输出：

表格表头 ID / Name / Email / Status / Actions，下面两行数据：Alice（绿色 active 徽章）、Bob（灰色 inactive 徽章），每行末尾一个蓝色「Edit」按钮。
点击 Edit 只在控制台打印「Edit: Alice」，页面内容不变。

(1) 📊 5 种 BaseCard 使用方式速查（纯展示）

(2) 📊 5 个常见错误速查

(3) 📊 5 个性能对比

6. $slots 和 useSlots

(1) $slots 访问插槽

(2) useSlots（Composition API）

<script setup>
const { useSlots } = Vue

const slots = useSlots()

// 检查插槽是否存在
if (slots.header) {
  console.log('Header slot exists')
}

// 动态渲染
if (slots.default) {
  console.log('Default slot exists')
}
</script>

(3) $slots vs useSlots

▶ 示例：$slots 5 大用途

输出：

灰边圆角容器内三段内容：浅灰页头「Header 内容」、正文「默认插槽：主要内容」、浅灰页脚「Footer 内容」。
容器底部灰色小字「已检测插槽: header, default, footer」。

7. 完整示例：可定制 Card 组件

▶ 示例：BaseCard 默认 + 具名插槽

输出：

三张卡片自上而下：
1) 只有正文「Simple content (only body)」，没有灰色页头和页脚；
2) 灰色页头「Product Name」+ 正文「Product description」；
3) 页头「Order #12345」+ 正文「Total: $99.99」+ 页脚绿色按钮「View Details」。

相关模板与辅助：useSlots()

❓ 常见问题

📖 小节

• 插槽是 Vue 的内容分发 API：父组件控制内容，子组件控制位置
• 3 种插槽：默认插槽（<slot />）、具名插槽（name="x"）、作用域插槽（:x="x"）
• 父组件用 <template #name> 或缩写 #name 传递具名插槽
• 作用域插槽让子组件传数据给父组件（slot props）
• <slot> 默认内容（fallback）当父组件不传时显示
• $slots / useSlots() 检查插槽存在
• 插槽和 props 配合：props 传配置，插槽传内容

📝 作业

1. 基础题（难度⭐） 实现一个简单的 Button 组件：

   • BaseButton.vue：默认插槽 + 3 种 variant（primary/success/danger）
   • props: variant (String)
   • 父组件：测试 3 种 variant + 自定义插槽内容

2. 进阶题（难度⭐⭐） 实现 BaseLayout 组件：

   • 子组件：3 个具名插槽（header / default / footer）
   • 父组件：使用 BaseLayout 实现 Dashboard 页面
   • 用 $slots 检测插槽是否存在
   • 添加默认内容（fallback）

3. 挑战题（难度⭐⭐⭐） 实现完整的 DataTable 组件系统：

   1. DataTable.vue：接收 columns + data，渲染表格
   2. 作用域插槽：#cell-{key} 允许父组件自定义单元格
   3. 默认插槽：父组件不提供时显示原始值
   4. 父组件示例：用户表 + 订单表，2 种不同的列渲染
   5. 性能：v-memo 缓存行（数据不变时跳过重渲染）
   6. TypeScript 强类型

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们