Vue Slots详解：组件间模板内容的灵活传递

PeterMap
3 阅读15分钟

在Vue组件化开发中，组件间的通信不仅有“父传子”的Props、“子传父”的Emits，还有一种更灵活的方式——插槽（Slots）。如果说Props传递的是数据、Emits传递的是事件，那么插槽传递的就是模板片段，它允许父组件向子组件注入任意结构的HTML、组件或文本，让子组件的结构更具复用性和灵活性。

前文我们已经掌握了Props和Emits的用法，解决了组件间数据和事件的双向通信，但在实际开发中，常常会遇到这样的场景：子组件的外层结构和样式固定（如卡片、按钮、布局容器），但内部内容需要根据父组件的使用场景动态变化。此时，Props和Emits就显得力不从心，而插槽恰好能完美解决这个问题。

本文将从插槽的本质出发，一步步拆解其核心概念、基础用法、进阶场景（具名插槽、作用域插槽等），结合博客开发的实战案例，用全新自定义代码示例，帮你彻底掌握插槽的用法，理解它与Props、Emits的配合逻辑，让组件设计更灵活、更具复用性。

一、插槽是什么？核心作用是什么？

插槽（Slots）是Vue提供的一种组件通信方式，核心作用是让父组件向子组件传递模板内容，而非单纯的数据。它打破了子组件模板固定的限制，允许父组件根据自身需求，为子组件注入不同的内容，同时保留子组件的外层结构和样式，实现“结构复用、内容定制”。

举个贴合博客场景的例子：我们开发一个通用的博客卡片组件（BlogCard.vue），其外层是固定的卡片样式（边框、阴影、内边距），但卡片内部的内容需要灵活变化——有时需要显示博客标题+摘要，有时需要显示标题+作者信息，有时需要显示标题+阅读量。此时，就可以通过插槽让父组件动态注入不同的内容，而无需重复开发多个卡片组件。

简单来说，插槽就像给子组件预留了一个“内容容器”，父组件可以根据需求，往这个容器里放入任意内容，子组件负责将这个内容渲染到指定位置。这种方式既保证了子组件结构的统一性，又赋予了父组件高度的定制权。

二、插槽的基础用法：默认插槽与默认内容

插槽的基础用法非常简单，分为两个核心步骤：子组件中定义“插槽出口”，父组件中传递“插槽内容”。同时，插槽还支持设置默认内容，当父组件未传递任何内容时，将显示默认内容，提升组件的健壮性。

1. 子组件：定义插槽出口（< slot> 标签）

在子组件的模板中，使用 < slot> 标签作为“插槽出口”，标记父组件传递的内容将被渲染到这个位置。< slot> 标签本身不会被渲染到DOM中，它只是一个占位符。

示例：子组件（BlogCard.vue），定义一个基础的卡片结构，预留插槽出口：

<script setup>
// 子组件可结合Props接收父组件传递的数据（如卡片宽度、边框样式）
const props = defineProps({
  cardWidth: {
    type: String,
    default: '300px'
  },
  bordered: {
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <div class="blog-card" :style="{ width: cardWidth, border: bordered ? '1px solid #eee' : 'none' }"&gt;
    <!-- 插槽出口：父组件传递的内容将渲染在这里 -->
    <slot></slot>
  </div>
</template>

<style scoped>
.blog-card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}
</style>

2. 父组件：传递插槽内容

父组件在使用子组件时，直接在子组件标签内部写入的内容，都会被当作“插槽内容”，传递给子组件的插槽出口进行渲染。插槽内容可以是任意合法的模板内容，包括文本、HTML元素、其他组件等。

示例：父组件（BlogList.vue），使用BlogCard组件，并传递不同的插槽内容：

<script setup>
import { ref } from 'vue'
import BlogCard from './BlogCard.vue'

// 博客数据
const blogs = ref([
  { 
    id: 1, 
    title: 'Vue Props 实战指南', 
    summary: '详解Props父传子的用法、校验规则及实战技巧',
    author: '前端小助手',
    readCount: 1200
  },
  { 
    id: 2, 
    title: 'Vue Emits 核心技巧', 
    summary: '掌握子传父通信方式，实现组件间双向联动',
    author: '前端小助手',
    readCount: 950
  }
])
</script>

<template>
  <div class="blog-list">
    &lt;h2&gt;我的博客列表&lt;/h2&gt;
    
    <!-- 第一个卡片：传递 标题+摘要 -->
    <BlogCard>
      <h3 class="card-title">{{ blogs[0].title }}</h3>
      <p class="card-summary">{{ blogs[0].summary }}</p>
    </BlogCard>
    
    <!-- 第二个卡片：传递 标题+作者+阅读量 -->
    <BlogCard cardWidth="350px" :bordered="false">
      <h3 class="card-title">{{ blogs[1].title }}</h3>
      <div class="card-meta">
        <span>作者：{{ blogs[1].author }}</span>
        <span>阅读量：{{ blogs[1].readCount }}</span>
      </div>
    </BlogCard>
  </div>
</template>

<style scoped>
.blog-list {
  padding: 20px;
}
.card-title {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
}
.card-summary {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.card-meta {
  margin-top: 12px;
  font-size: 13px;
  color: #999;
  display: flex;
  gap: 16px;
}
</style>

可以看到，两个BlogCard组件共用了相同的外层样式，但内部内容完全不同——这就是插槽的核心价值：复用子组件结构，定制内部内容。

3. 插槽的默认内容

如果父组件在使用子组件时，没有传递任何插槽内容，子组件的插槽出口会显示什么？为了避免插槽为空导致的布局错乱，我们可以为插槽设置“默认内容”——只需将默认内容写在 < slot> 标签内部即可。

示例：修改BlogCard.vue，为插槽添加默认内容：

<template>
  <div class="blog-card" :style="{ width: cardWidth, border: bordered ? '1px solid #eee' : 'none' }">
    <!-- 插槽默认内容：父组件未传递内容时显示 -->
    <slot>
      <h3 class="default-title">暂无博客内容</h3>
      <p class="default-desc">请添加博客信息</p>
    </slot>
  </div>
</template>

<style scoped>
/* 原有样式不变，新增默认内容样式 */
.default-title {
  margin: 0 0 8px 0;
  color: #999;
  font-size: 16px;
}
.default-desc {
  margin: 0;
  color: #ccc;
  font-size: 14px;
}
</style>

此时，如果父组件未传递插槽内容，直接使用 < BlogCard />，就会显示“暂无博客内容”的默认提示；如果传递了内容，默认内容会被覆盖，显示父组件传递的内容。

三、进阶用法：具名插槽（多插槽出口）

基础用法中的插槽只有一个出口，适用于子组件只有一个可定制区域的场景。但在实际开发中，很多子组件会有多个可定制区域——比如一个布局组件，包含头部、主体、底部三个区域，每个区域都需要父组件传递不同的内容。此时，就需要用到具名插槽。

具名插槽的核心是：给每个插槽出口命名，父组件根据名称，将不同的内容传递到对应的插槽出口，实现多区域的分别定制。

1. 子组件：定义具名插槽出口

在子组件中，通过 < slot> 标签的 name 属性，为每个插槽出口命名。没有命名的插槽，会被隐式命名为“default”（默认插槽）。

示例：子组件（BlogLayout.vue），一个博客布局组件，包含头部、主体、底部三个具名插槽：

<script setup>
// 布局组件可接收Props，控制整体样式
const props = defineProps({
  layoutWidth: {
    type: String,
    default: '1200px'
  }
})
</script>

<template>
  <div class="blog-layout" :style="{ width: layoutWidth, margin: '0 auto' }"&gt;
    <!-- 头部插槽：name="header" -->
    <header class="layout-header">
      <slot name="header"></slot>
    </header><!-- 主体插槽：默认插槽（name="default"） -->
    <main class="layout-main">
      <slot></slot&gt;
    &lt;/main&gt;
    
    <!-- 底部插槽：name="footer" -->
    <footer class="layout-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style scoped>
.blog-layout {
  padding: 20px;
}
.layout-header {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
.layout-main {
  min-height: 400px;
  margin-bottom: 20px;
}
.layout-footer {
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #999;
  font-size: 14px;
  text-align: center;
}
</style>

2. 父组件：传递具名插槽内容

父组件传递具名插槽内容时，需要使用 < template> 标签，并通过 v-slot:插槽名称（简写为 #插槽名称），指定内容要传递到的插槽出口。对于默认插槽（name="default"），可以省略名称，直接将内容写在子组件标签内部，或使用 < template #default> 显式指定。

示例：父组件（BlogPage.vue），使用BlogLayout组件，传递三个插槽的内容：

<script setup>
import BlogLayout from './BlogLayout.vue'
import BlogCard from './BlogCard.vue'
import { ref } from 'vue'

const blogs = ref([
  { id: 1, title: 'Vue Props 实战指南', summary: '详解Props父传子用法' },
  { id: 2, title: 'Vue Emits 核心技巧', summary: '掌握子传父通信方式' },
  { id: 3, title: 'Vue Slots 灵活用法', summary: '组件间模板内容传递技巧' }
])
</script>

<template>
  <BlogLayout layoutWidth="1000px"&gt;
    <!-- 头部插槽：简写 #header -->
    <template #header>
      <h1 class="page-title">Vue 组件通信系列教程</h1>
      <p class="page-desc">从Props、Emits到Slots，全面掌握组件通信技巧</p>
    </template>
    
    <!-- 默认插槽：主体内容，可直接写在子组件内部 -->
    <div class="blog-container">
      <BlogCard v-for="blog in blogs" :key="blog.id">
        <h3 class="card-title">{{ blog.title }}</h3>
        <p class="card-summary">{{ blog.summary }}&lt;/p&gt;
      &lt;/BlogCard&gt;
    &lt;/div&gt;
    
    <!-- 底部插槽：简写 #footer -->
    <template #footer>
      <p>© 2026 前端小助手 | 专注Vue前端开发教程</p>
      <p>联系我们：frontend@example.com</p>
    </template>
  </BlogLayout>
</template>

<style scoped>
.page-title {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
}
.page-desc {
  margin: 0;
  color: #666;
  font-size: 16px;
}
.blog-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
</style>

这里有两个关键注意点：

  • v-slot:header 可以简写为 #header，这是Vue推荐的写法，更简洁高效；
  • 默认插槽的内容可以直接写在子组件标签内部（如上面的.blog-container），也可以用 <template #default> 显式包裹，后者更清晰，尤其适合同时使用多个具名插槽的场景。

四、高级用法：作用域插槽（子传父模板数据）

我们知道，父组件传递的插槽内容，只能访问父组件的数据作用域（渲染作用域规则），无法直接访问子组件的数据。但在某些场景下，插槽内容需要结合子组件的数据来渲染——比如一个列表组件，子组件负责获取列表数据，父组件负责定制列表项的渲染样式，此时就需要用到作用域插槽。

作用域插槽的核心是：子组件通过插槽出口，向父组件传递数据（类似Props），父组件接收这些数据后，结合自身需求渲染插槽内容，实现“子组件提供数据，父组件定制样式”的灵活配合。

1. 子组件：向插槽传递数据

子组件在定义插槽出口时，通过 v-bind 向插槽传递数据（称为“插槽Props”），这些数据会被传递给父组件的插槽内容。

示例：子组件（BlogListSlot.vue），一个博客列表组件，获取列表数据并向插槽传递每一项的博客信息：

<script setup>
import { ref, onMounted } from 'vue'

// 子组件内部获取博客列表数据
const blogs = ref([])

onMounted(() => {
  // 模拟接口请求
  setTimeout(() => {
    blogs.value = [
      { id: 1, title: 'Vue Props 实战指南', summary: '详解Props父传子用法', readCount: 1200 },
      { id: 2, title: 'Vue Emits 核心技巧', summary: '掌握子传父通信方式', readCount: 950 },
      { id: 3, title: 'Vue Slots 灵活用法', summary: '组件间模板内容传递技巧', readCount: 880 }
    ]
  }, 1000)
})
</script>

<template>
  <div class="blog-list-slot">
    <div class="loading" v-if="blogs.length === 0">加载中...</div>
    
    <ul v-else>
      <li v-for="blog in blogs" :key="blog.id" class="list-item"&gt;
        <!-- 向插槽传递数据：v-bind="blog" 等价于 :id="blog.id" :title="blog.title" ... -->
        <slot name="item" v-bind="blog"></slot>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.blog-list-slot {
  padding: 20px;
}
.loading {
  text-align: center;
  padding: 50px;
  color: #666;
}
.list-item {
  list-style: none;
  padding: 16px;
  border-bottom: 1px solid #eee;
}
</style>

这里，我们通过 v-bind="blog" 向名为“item”的插槽传递了每一项博客的完整数据（id、title、summary、readCount），父组件可以接收这些数据并渲染。

2. 父组件：接收插槽Props并渲染

父组件在传递具名作用域插槽内容时，通过 v-slot:插槽名称="插槽Props"（简写为 #插槽名称="插槽Props"），接收子组件传递的数据，然后在插槽内容中使用这些数据。

示例：父组件（BlogHome.vue），使用BlogListSlot组件，接收插槽Props并定制列表项样式：

<script setup>
import BlogListSlot from './BlogListSlot.vue'
</script>

<template>
  <div class="blog-home">
    <h2>Vue 组件通信教程列表</h2&gt;
    
    &lt;BlogListSlot&gt;
      <!-- 接收插槽Props：用解构语法提取需要的字段 -->
      <template #item="{ title, summary, readCount }">
        <div class="item-content">
          <h3 class="item-title">{{ title }}</h3>
          <p class="item-summary">{{ summary }}</p>
          <div class="item-meta">
            <span>阅读量：{{ readCount }}</span>
          </div>
        </div>
      </template>
    </BlogListSlot>
  </div>
</template>

<style scoped>
.blog-home {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.blog-home h2 {
  color: #333;
  margin-bottom: 20px;
}
.item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-title {
  margin: 0;
  color: #4299e1;
  font-size: 18px;
  cursor: pointer;
}
.item-title:hover {
  text-decoration: underline;
}
.item-summary {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.item-meta {
  font-size: 13px;
  color: #999;
}
</style>

这里的核心逻辑是：子组件负责获取和管理数据（博客列表），父组件负责定制列表项的渲染样式和结构，通过作用域插槽实现了“数据由子组件提供，样式由父组件定制”的灵活配合，极大提升了组件的复用性。

补充说明：默认插槽也可以是作用域插槽，子组件通过 传递数据，父组件通过 <template #default="slotProps"> 接收数据即可。

五、插槽的其他实用场景

1. 条件插槽（根据插槽内容是否存在渲染）

有时我们需要根据父组件是否传递了某个插槽的内容，来决定子组件的部分结构是否渲染。此时可以结合 $slots 对象（子组件内置对象，包含所有插槽的信息）和 v-if 实现。

示例：修改BlogCard.vue，根据是否传递了“footer”插槽，渲染卡片底部区域：

<template>
  <div class="blog-card" :style="{ width: cardWidth, border: bordered ? '1px solid #eee' : 'none' }">
    <slot>
      <h3 class="default-title">暂无博客内容&lt;/h3&gt;
    &lt;/slot&gt;
    
    <!-- 条件渲染：如果父组件传递了footer插槽，才渲染底部区域 -->
    <div class="card-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
/* 原有样式不变，新增底部样式 */
.card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #999;
}
</style>

父组件使用时，若传递了footer插槽，卡片会显示底部区域；若未传递，则不显示，避免了空布局的问题。

2. 动态插槽名

插槽名称也可以是动态的，通过 v-slot:[动态变量]（简写为 #[动态变量]），实现根据父组件的状态动态切换插槽内容。

示例：父组件中，根据当前选中的标签，动态切换传递给子组件的插槽内容：

<script setup>
import { ref } from 'vue'
import BlogCard from './BlogCard.vue'

// 动态插槽名
const activeSlot = ref('content1')

// 切换插槽
const switchSlot = () => {
  activeSlot.value = activeSlot.value === 'content1' ? 'content2' : 'content1'
}
</script>

<template>
  <div>
    <button @click="switchSlot">切换内容</button>
    
    <BlogCard&gt;
      <!-- 动态插槽名：根据activeSlot的值切换 -->
      <template #[activeSlot]>
        <div v-if="activeSlot === 'content1'">
          <h3>内容1：Vue Props 详解</h3>
        </div>
        <div v-else>
          <h3>内容2：Vue Emits 详解</h3>
        </div>
      </template>
    </BlogCard>
  </div>
</template>

六、插槽与Props、Emits的区别与配合

插槽、Props、Emits都是Vue组件间通信的核心方式，三者功能不同、各有侧重，配合使用能实现更灵活的组件设计。我们用一张表格清晰区分三者：

通信方式核心作用传递内容通信方向
Props父组件向子组件传递数据JavaScript数据（字符串、数字、对象等）父 → 子
Emits子组件向父组件传递事件/数据事件信号、额外数据子 → 父
Slots父组件向子组件传递模板内容HTML、组件、文本等模板片段父 → 子

三者的配合场景示例：

一个博客详情组件（BlogDetail.vue），父组件通过Props传递博客ID，子组件通过ID请求详情数据；子组件通过Emits向父组件触发“收藏”事件，传递博客ID；父组件通过Slots向子组件传递“分享按钮”的模板内容，子组件将其渲染在详情页顶部。

这种配合方式，既保证了数据的单向流动，又实现了内容的灵活定制，是Vue组件开发中最常用的模式。

七、插槽的核心注意事项

1. 渲染作用域规则

插槽内容的作用域是父组件，只能访问父组件的数据和方法，无法直接访问子组件的数据（除非通过作用域插槽接收）；子组件的模板只能访问子组件的数据和方法，这和JavaScript的词法作用域规则一致。

2. 具名插槽的简写规范

v-slot:name 的简写 #name 只能用于 < template> 标签上，不能直接用于子组件标签上（默认插槽除外）。例如：< template #header> 是合法的，但 <BlogLayout #header> 是不合法的。

3. 作用域插槽的Props命名

父组件接收插槽Props时，可以使用解构语法（如 #item="{ title, readCount }"），简化代码；如果插槽Props的名称较长，也可以重命名（如 #item="{ title: blogTitle }"）。

4. 避免过度使用插槽

插槽的核心价值是“内容定制”，如果子组件的内容是固定的，或只需传递简单数据，优先使用Props，避免过度使用插槽导致组件结构混乱、可读性下降。

八、总结：插槽让组件更灵活、更具复用性

插槽作为Vue组件间通信的重要方式，弥补了Props和Emits在“模板内容传递”上的不足，其核心价值是实现“结构复用、内容定制”——子组件负责提供固定的外层结构和逻辑，父组件负责注入灵活的内部内容，让组件既能保持统一性，又能适应不同的使用场景。

总结一下插槽的核心要点：

  • 默认插槽：最基础的用法，子组件一个插槽出口，父组件传递任意内容，支持默认内容；
  • 具名插槽：多个插槽出口，按名称传递内容，适用于多区域定制场景；
  • 作用域插槽：子组件向父组件传递数据，父组件结合数据定制内容，适用于“子组件提供数据、父组件定制样式”的场景；
  • 与Props、Emits配合：三者各司其职，Props传数据、Emits传事件、Slots传模板，实现灵活的组件通信。

掌握插槽的用法，能让你在Vue组件开发中，设计出更灵活、更具复用性的组件，尤其在开发通用组件（如卡片、布局、列表）时，插槽更是不可或缺的工具。后续我们还会讲解组件通信的高级技巧，让你彻底掌握Vue组件开发的核心能力。

avatar
文章
阅读
粉丝