深入理解 Vue 插槽：从基础到高级用法

pasilision�

1563人浏览 · 2025-09-21 09:45:00

pasilision� · 2025-09-21 09:45:00 发布

在 Vue 组件化开发中，插槽（Slot）是实现组件复用与灵活扩展的核心技术之一。它允许我们在父组件中向子组件的指定位置插入内容，打破了组件内部结构的固定性，让组件具备更强的通用性。本文将从基础概念出发，逐步深入插槽的核心用法与高级特性，帮助你真正掌握这一实用技能。

一、插槽的基础概念：为什么需要插槽？

在未使用插槽时，子组件的内容通常是 “写死” 的。例如，我们创建一个Card组件用于展示卡片内容：

<!-- 子组件 Card.vue -->

<template>

 <div class="card">

   <div class="card-header">默认标题</div>

   <div class="card-body">默认内容</div>

 </div>

</template>

若父组件需要复用这个Card组件，但希望每个卡片的标题和内容不同（比如一个展示商品信息，一个展示用户资料），直接修改子组件显然不现实 —— 这会导致组件失去通用性。

而插槽的核心作用，就是为子组件预留 “内容入口”，让父组件可以根据需求动态注入内容。通过插槽，子组件只负责 “结构框架”，父组件负责 “具体内容”，实现了 “框架与内容的分离”。

二、默认插槽：最简单的内容注入

默认插槽是最基础的插槽类型，子组件中未命名的<slot>标签即为默认插槽，父组件中所有插入子组件标签内部的内容，都会被渲染到默认插槽的位置。

1. 子组件定义默认插槽

<!-- 子组件 Card.vue -->

<template>

 <div class="card">

   <div class="card-header">

     <!-- 预留标题插槽 -->

     <slot name="header">默认标题</slot>

   </div>

   <div class="card-body">

     <!-- 预留内容插槽（默认插槽，可省略name属性） -->

     <slot>默认内容</slot>

   </div>

 </div>

</template>

注意：<slot>标签中的 “默认标题”“默认内容” 是备用内容—— 当父组件未注入对应内容时，备用内容会生效；若父组件注入了内容，备用内容会被覆盖。

2. 父组件使用默认插槽

父组件中，直接在子组件标签内部写入内容，即可注入默认插槽：

<!-- 父组件 Parent.vue -->

<template>

 <div>

   <!-- 第一个Card：注入标题和内容 -->

   <Card>

     <!-- 注入“header”命名插槽 -->

     <template v-slot:header>

       <h3>商品详情</h3>

     </template>

     <!-- 注入默认插槽（可省略<template>标签） -->

     <p>品牌：Vue官方</p>

     <p>价格：99元</p>

   </Card>

   <!-- 第二个Card：只注入内容，标题用备用内容 -->

   <Card>

     <p>用户名：Vue开发者</p>

     <p>等级：高级会员</p>

   </Card>

 </div>

</template>

<script>

import Card from './Card.vue';

export default {

 components: { Card }

};

</script>

渲染结果：

第一个卡片的标题为 “商品详情”，内容为商品信息；
第二个卡片的标题为子组件的备用内容 “默认标题”，内容为用户信息。

三、命名插槽：精准控制内容位置

当子组件需要多个插槽（如卡片的 “标题”“内容”“底部操作区”）时，默认插槽无法满足需求 —— 此时需要命名插槽，通过name属性为每个插槽分配唯一标识，父组件可精准指定内容注入的位置。

1. 子组件定义命名插槽

在<slot>标签中添加name属性，即可定义命名插槽：

<!-- 子组件 Card.vue -->

<template>

 <div class="card">

   <!-- 命名插槽：header -->

   <slot name="header">默认标题</slot>

   <!-- 命名插槽：body -->

   <slot name="body">默认内容</slot>

   <!-- 命名插槽：footer -->

   <slot name="footer">默认操作</slot>

 </div>

</template>

2. 父组件使用命名插槽

父组件中，通过v-slot:插槽名（可简写为#插槽名）指定内容对应的插槽：

<!-- 父组件 Parent.vue -->

<template>

 <Card>

   <!-- 方式1：完整写法 v-slot:header -->

   <template v-slot:header>

     <h3>订单信息</h3>

   </template>

   <!-- 方式2：简写 #body（推荐） -->

   <template #body>

     <p>订单号：20240501001</p>

     <p>状态：已发货</p>

   </template>

   <!-- 方式3：注入footer插槽，覆盖备用内容 -->

   <template #footer>

     <button>查看物流</button>

     <button>申请售后</button>

   </template>

 </Card>

</template>

注意：v-slot指令必须配合<template>标签使用（默认插槽可省略<template>，但命名插槽不可省略），且#是v-slot:的简写，是 Vue 推荐的用法。

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

前面的插槽中，父组件注入的内容只能使用父组件自身的数据；但在某些场景下，父组件需要根据子组件的数据动态渲染内容（例如：子组件渲染列表，父组件决定列表项的展示样式）—— 这就需要作用域插槽，它允许子组件向父组件 “传递数据”，让父组件的内容能访问子组件的变量。

1. 子组件定义作用域插槽

子组件通过v-bind将数据绑定到<slot>标签上，这些绑定的属性会成为 “插槽 props”，供父组件访问：

<!-- 子组件 List.vue -->

<template>

 <ul>

   <li v-for="(item, index) in list" :key="index">

     <!-- 绑定item和index到插槽，作为插槽props -->

     <slot :item="item" :index="index">

       <!-- 备用内容：直接显示item -->

       {{ item }}

     </slot>

   </li>

 </ul>

</template>

<script>

export default {

 // 子组件的数据源

 props: {

   list: {

     type: Array,

     required: true

   }

 }

};

</script>

2. 父组件使用作用域插槽

父组件通过v-slot:插槽名="props对象"接收子组件传递的插槽 props，然后在内容中使用这些数据：

<!-- 父组件 Parent.vue -->

<template>

 <div>

   <!-- 场景1：渲染“商品列表”，展示名称和价格 -->

   <List :list="[

     { name: 'Vue教程', price: 99 },

     { name: 'React教程', price: 89 }

   ]">

     <!-- 接收插槽props，命名为slotProps（可自定义名称） -->

     <template #default="slotProps">

       <span>第{{ slotProps.index + 1 }}个：</span>

       <span>{{ slotProps.item.name }} - {{ slotProps.item.price }}元</span>

     </template>

   </List>

   <!-- 场景2：渲染“用户列表”，只展示用户名 -->

   <List :list="[

     { name: '张三' },

     { name: '李四' }

   ]">

     <!-- 解构插槽props（推荐，简化代码） -->

     <template #default="{ item }">

       <span>用户名：{{ item.name }}</span>

     </template>

   </List>

 </div>

</template>

<script>

import List from './List.vue';

export default {

 components: { List }

};

</script>

关键要点：