当前位置：首页 > news >正文

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

news 2025/9/22 7:10:54

在 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>

关键要点：