Vue核心特性05，插槽（Slot）详解：默认插槽、具名插槽与作用域插槽实战

原创于 2025-12-23 09:29:54 发布 · 320 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

前端同时被 2 个专栏收录

62 篇文章

订阅专栏

VUE

20 篇文章

订阅专栏

2025博客之星年度评选已开启 10w+人浏览 1.9k人参与

在前端组件化开发中，插槽（Slot）是 Vue、React 等框架实现组件内容分发的核心机制，它让组件的结构变得灵活可定制，就像给组件预留了 “占位符”，使用者可以根据需求往里面填充任意内容。本文将以 Vue 框架为例（Vue2/Vue3 通用逻辑，语法略有差异），详细拆解默认插槽、具名插槽与作用域插槽的概念、使用场景及实战案例，帮你彻底掌握插槽的使用技巧。

一、插槽的核心思想：组件的 “内容分发器”

在没有插槽的情况下，组件的内容是固定写死在组件内部的，无法被外部自定义。比如一个简单的Card组件：

<!-- Card.vue -->
<template>
  <div class="card">
    <h3>固定标题</h3>
    <p>固定内容</p>
  </div>
</template>

当我们在父组件中使用<Card/>时，只能显示固定的标题和内容，灵活性极低。

而插槽的出现，就是为了解决这个问题：组件开发者在组件内部预留插槽位置，组件使用者在使用组件时，向插槽中传入自定义内容。本质上，插槽是父子组件之间内容传递的一种方式，区别于props传递数据，插槽传递的是 “DOM 结构 / 组件内容”。

二、默认插槽：最基础的内容分发

1. 概念

默认插槽（匿名插槽）是组件中最基础的插槽类型，组件内部只预留一个插槽位置，使用者直接在组件标签内写入内容，就会被填充到这个插槽中。

2. 基本使用

步骤 1：组件内部定义默认插槽

在子组件中使用<slot>标签标记插槽位置，若需要默认内容（当使用者未传入内容时显示），可以直接写在<slot>标签内部：

<!-- Card.vue -->
<template>
  <div class="card" style="border: 1px solid #ccc; padding: 20px; margin: 20px;">
    <!-- 预留默认插槽位置，设置默认内容 -->
    <slot>这是默认内容，当父组件未传入内容时显示</slot>
  </div>
</template>

步骤 2：父组件使用默认插槽

在父组件中使用<Card>组件时，直接在组件标签内写入自定义内容，这些内容会替换<slot>标签及其默认内容：

<!-- Parent.vue -->
<template>
  <div>
    <!-- 传入自定义内容 -->
    <Card>
      <h3>自定义标题</h3>
      <p>这是父组件传入的自定义内容，替换了默认插槽的内容</p>
    </Card>

    <!-- 不传入内容，显示默认内容 -->
    <Card />
  </div>
</template>

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

3. 特点

无名称，一个组件只能有一个默认插槽；
支持传入任意内容：文本、HTML 标签、其他组件均可；
有默认内容兜底，提升组件的健壮性。

三、具名插槽：解决多位置内容分发

1. 概念

当组件需要预留多个插槽位置时（比如卡片的头部、主体、尾部），默认插槽就无法满足需求了。这时可以使用具名插槽，给每个<slot>标签设置name属性，标记不同的插槽位置，使用者通过名称将内容对应填充到指定插槽中。

2. 基本使用

步骤 1：组件内部定义具名插槽

在子组件中给<slot>添加name属性，区分不同插槽（未设置name的<slot>仍为默认插槽）：

<!-- Card.vue -->
<template>
  <div class="card" style="border: 1px solid #ccc; padding: 20px; margin: 20px;">
    <!-- 头部插槽 -->
    <slot name="header">默认头部</slot>
    <!-- 主体插槽（默认插槽，name可省略） -->
    <slot>默认主体</slot>
    <!-- 尾部插槽 -->
    <slot name="footer">默认尾部</slot>
  </div>
</template>

步骤 2：父组件使用具名插槽

Vue3 中推荐使用<template>标签配合v-slot:指令（简写为#）指定插槽名称，将内容传入对应插槽；Vue2 中还可以使用slot属性（已被 Vue3 废弃）。

Vue3 写法（推荐）：

<!-- Parent.vue -->
<template>
  <div>
    <Card>
      <!-- 头部插槽：使用#header简写 -->
      <template #header>
        <h1>我的自定义卡片标题</h1>
      </template>

      <!-- 主体插槽（默认插槽）：可直接写内容，也可使用#default -->
      <template #default>
        <p>这是卡片的主体内容，包含用户信息、商品详情等</p>
        <button>点击按钮</button>
      </template>

      <!-- 尾部插槽：使用#footer简写 -->
      <template #footer>
        <div>版权所有 © 2025</div>
      </template>
    </Card>
  </div>
</template>

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

3. 特点

有明确的名称，一个组件可以有多个具名插槽；
内容与插槽位置一一对应，结构更清晰；
支持与默认插槽混合使用。

四、作用域插槽：子组件向父组件传数据的插槽

1. 概念

默认插槽和具名插槽解决的是 “父组件向子组件传内容” 的问题，但有时父组件在填充插槽内容时，需要用到子组件内部的数据（比如子组件请求的列表数据、子组件的状态等）。这时就需要作用域插槽：子组件将数据通过<slot>标签的属性传递给父组件，父组件接收后可以在插槽内容中使用这些数据。

2. 基本使用

步骤 1：子组件定义作用域插槽

在子组件的<slot>标签上绑定属性（即传递数据），这些属性会被打包成一个对象，传递给父组件：

<!-- List.vue -->
<template>
  <div class="list" style="border: 1px solid #eee; padding: 20px;">
    <h3>商品列表</h3>
    <ul>
      <!-- 遍历列表数据 -->
      <li v-for="(item, index) in goodsList" :key="index">
        <!-- 定义作用域插槽，传递item和index数据 -->
        <slot :item="item" :index="index">
          <!-- 默认内容：直接显示商品名称 -->
          {{ item.name }}
        </slot>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 子组件内部的列表数据（可能是从接口请求来的）
const goodsList = [
  { id: 1, name: '手机', price: 5999 },
  { id: 2, name: '电脑', price: 8999 },
  { id: 3, name: '平板', price: 3999 }
]
</script>

步骤 2：父组件接收并使用作用域插槽的数据

父组件使用v-slot:（或#）指令时，可以接收子组件传递的参数（一个对象），然后在插槽内容中使用这些参数。

Vue3 写法：

<!-- Parent.vue -->
<template>
  <div>
    <!-- 场景1：自定义显示商品名称和价格 -->
    <List>
      <!-- 接收子组件传递的参数，解构赋值item和index -->
      <template #default="{ item, index }">
        <span>第{{ index + 1 }}个商品：{{ item.name }} - 价格：{{ item.price }}元</span>
      </template>
    </List>

    <!-- 场景2：只显示商品价格（覆盖默认内容） -->
    <List>
      <!-- 也可以不解构，直接接收整个对象，比如命名为slotProps -->
      <template #default="slotProps">
        <span>价格：¥{{ slotProps.item.price }}</span>
      </template>
    </List>
  </div>
</template>

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

3. 进阶：具名作用域插槽

如果子组件是具名插槽，也可以传递数据，父组件接收方式与默认作用域插槽一致，只是需要指定插槽名称：

<!-- 子组件：具名作用域插槽 -->
<slot name="goods" :item="item" :index="index"></slot>

<!-- 父组件：接收具名作用域插槽的数据 -->
<template #goods="{ item }">
  <span>{{ item.name }} - 特惠价</span>
</template>