登录
最新版vue3+TypeScript开发入门到实战教程之插槽slot详解
2026年4月2日 14:46
插槽概述
Slot，可翻译中文为插槽、空槽、钥匙槽。以下为官方定义Solt（插槽）是 Vue 提供的一种内容分发机制，允许父组件向子组件指定位置注入内容。简单理解为大门样式已经设计好，钥匙空槽预留，使用大门的人可以按装指纹锁、物理锁等锁。
Slot插槽分三种类型
- 默认插槽
- 具名插槽
- 作用于插槽
默认插槽
概述
默认插槽是具名插槽的一个特例，实际类型应分成两类：
- 具名插槽
- 作用于插槽
默认插槽实例
- 创建Fish，Fish组件提供标题、尾部，中间插槽内容由使用者提供
- 创建App组件，引用Fish组件
App组件代码
<template>
<div class="app">
<Fish>
<div>游泳的鲫鱼</div>
</Fish>
<Fish>
<template>
<div>会飞的鱼</div>
</template>
</Fish>
<Fish>
<template v-slot:default>
<div>跃龙门的鲤鱼</div>
</template>
</Fish>
</div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>
Fish组件代码
<template>
<div class="fish">
<h2>头部</h2>
<slot></slot>
<h2>底部</h2>
</div>
</template>
运行效果：
注意中间位置，会飞的鱼没有显示出来，默认插槽不需要使用template标签，若使用，必须给标签设置默认名称。
具名插槽
概述
在Fish组件中，可能会有很多个插槽， 如顶部、中部都可以设置一个插槽。使用名称来区分插槽：
- 给slot设置名称
- template标签设置slot名称
具名插槽实例
Fish组件代码
<template>
<div class="fish">
<h2>{{title}}</h2>
<slot name="content">默认数据</slot>
<slot name="footer">
<h2>底部</h2>
</slot>
</div>
</template>
<script setup lang="ts">
defineProps(['title']);
</script>
App组件代码
<template>
<div class="app">
<Fish title="飞鱼">
<template v-slot:content>
<div>会飞的鱼</div>
</template>
</Fish>
<Fish title="飞鱼">
<template v-slot:footer>
<h2>鲤鱼跃龙门</h2>
</template>
<template v-slot:content>
<div>会飞的鱼</div>
</template>
</Fish>
<Fish title="草鱼">
<template #content>
<div>吃草的鱼</div>
</template>
<template v-slot:footer>
<h2>很爱水草</h2>
</template>
</Fish>
</div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>
运行效果
- 引用第一个Fish组件时，当不使用名称为footer的插槽时，它显示默认值
- 引用第二个组件说明，template显示位置取决于所选Slot
- 引用第三个组件说明，v-slot:可用#缩写，如v-slot:content缩写成#content
作用域插槽
概述
插槽实际分两类，一是具名插槽，一是作用域插槽，两者区别:
- 具名插槽数据与显示都在使用者
- 作用域插槽的数据是在被引用的组件当中，使用者只负责显示数据
- 通过slot标签可以将数据传递给template
作用域插槽实例
Fish组件代码
<template>
<div class="fish">
<h2>{{title}}</h2>
<slot name="content" :data="fishs">默认数据</slot>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
defineProps(['title']);
let fishs = reactive([
{ name: '鲫鱼', price: 10 },
{ name: '草鱼', price: 33 },
{ name: '娃娃鱼', price: 88 },
])
</script>
App组件代码
<template>
<div class="app">
<Fish title="飞鱼">
<template v-slot:content="params">
<ul>
<li v-for="item in params.data">
鱼：{{ item.name }}--价格:{{ item.price }}
</li>
</ul>
</template>
</Fish>
<Fish title="草鱼">
<template #content="{data}">
<h4 v-for="item in data">
鱼：{{ item.name }}--价格:{{ item.price }}
</h4>
</template>
</Fish>
</div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>
运行代码查看效果
核心代码：
- 传递数据：slot传递数据
<slot name="content" :data="fishs">默认数据</slot>， - 传递数据：template 接收数据
<template v-slot:content="params">。 注意param结构赋值data
总结
