Vue3 Slot—插槽全家桶使用详解-云智核

Vue3 Slot—插槽全家桶使用详解

发布时间：2025-11-05 01:28:09 来源：云智核作者：数据库

插槽 slot 就是插槽全子组件中提供给父组件使用的一个占位符，用 <slot></slot> 表示，家桶父组件可以给这个占位符内填充任何模板代码，使用填充的详解内容会自动替换 <slot></slot> 标签。

插槽被分为三种：匿名插槽、插槽全具名插槽、家桶作用域插槽。使用

没有名字的插槽全插槽就是匿名插槽，组件可以放置一个或多个 <slot></slot>。家桶

子组件内放置一个插槽：

父组件使用插槽：

// 或

哈哈哈哈哈哈

如果有多个 slot 时，使用父组件中需要填充的详解内容就会被多次插入。

组件内可以放置多个插槽，家桶如果都是使用匿名插槽的源码下载时候，渲染的都是父组件默认内容，无法实现插入多个不同内容，此时就需要给插槽设置名字以便于区分它们。

具名插槽就是给插槽取个名字，可以把组件内多个插槽放在不同的地方，父级填充内容时，可以根据名字把内容填充到对应的插槽内。

定义为多个插槽的组件：

头部：

主体：

底部：

父组件填充内容需要对象插槽名：

可以简写为：

匿名插槽和具名插槽父组件只能访问父组件中编译的内容，b2b供应网子组件只能访问子组件内的内容，有时我们在父组件需要访问到子组件中的内容，此时 vue 给我们提供了作用域插槽。

作用域插槽子组件内定义要传送的数据：

在调用组件的父组件内接收数据：

有多个插槽，不同状态下展示不同的插槽，此时我们就可以使用动态插槽，插槽名是一个变量名，其值可以是动态修改的。

动态插槽

我们可以做一个类似于选项卡的效果：

父组件代码：

import { reactive, ref } from vue

let name: string = ref(header)

type Slots = {

name: string

content: string

}

const slotList = reactive([

{ name: header, content: 头 },

{ name: body, content: 中间 },

{ name: footer, content: 尾 },

])

const changeSlot = (item: Slots): void => {

name.value = item.name

}

子组件代码：

此时就可以动态地选择其中任意一个插槽展示。

随便看看