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

开发 前端
插槽 Slot 就是子组件中提供给父组件使用的一个占位符,用 <slot></slot> 表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换 <slot></slot> 标签。

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

插槽被分为三种:匿名插槽、具名插槽、作用域插槽。

1、匿名插槽

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

子组件内放置一个插槽:

<template>
<div>
<slot></slot>
</div>
</template>

父组件使用插槽:

<Header>
<div>哈哈哈哈哈哈</div>
</Header>

// 或
<Header>
<template v-slot>
哈哈哈哈哈哈
</template>
</Header>

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

2、具名插槽

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

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

定义为多个插槽的组件:

<template>
<div>
头部:
<slot name="header"></slot>
主体:
<slot></slot>
底部:
<slot name="footer"></slot>
</div>
</template>

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

<Com>
<template v-slot:header>
<div>我是header</div>
</template>
<template v-slot>
<div>中间匿名插槽</div>
</template>
<template v-slot:footer>
<div>我是 footer</div>
</template>
</Com>

可以简写为:

<Com>
<template #header>
<div>我是header</div>
</template>
<template #default>
<div>中间匿名插槽</div>
</template>
<template #footer>
<div>我是 footer</div>
</template>
</Com>

3、作用域插槽

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

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

<template>
<div v-for="item in 10" :key="item">
<slot :data="item" name="list"></slot>
</div>
</template>

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

<SlotCom>
<template #list="{data}">
{{ data }}
</template>
</SlotCom>

4、动态插槽

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

<Dialog>
<template #[name]>
<div>
动态插槽
</div>
</template>
</Dialog>

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

父组件代码:

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
{{ item.content }}
</button>
<childCom>
<template #[name]>
<div>我是{{ name }}插槽</div>
</template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')

type Slots = {
name: string
content: string
}
const slotList = reactive<Slots[]>([
{ name: 'header', content: '头' },
{ name: 'body', content: '中间' },
{ name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
name.value = item.name
}
</script>

子组件代码:

<template>
<div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</template>

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

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-29 07:51:21

Vue3 插件Vue应用

2022-06-15 11:51:14

Vue3开发避坑

2022-01-13 08:13:14

Vue3 插件Vue应用

2024-06-03 10:00:51

Vue 3语法插槽

2022-01-21 09:06:13

Vue3版本兼容版本

2021-12-01 08:11:44

Vue3 插件Vue应用

2024-11-06 10:16:22

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-05-08 07:37:32

Vue 命名插槽

2024-03-22 08:57:04

Vue3Emoji表情符号

2024-03-21 08:34:49

Vue3WebSocketHTTP

2022-09-06 12:20:30

Vue3CVCRUD

2020-09-19 21:15:26

Composition

2021-12-02 05:50:35

Vue3 插件Vue应用

2024-04-08 07:28:27

PiniaVue3状态管理库

2020-05-25 17:03:47

Vue嵌套插槽开发

2024-05-15 09:53:22

2021-01-15 05:16:37

Vue3开源代码量

2024-03-01 11:32:22

Vue3APIVue.js
点赞
收藏

51CTO技术栈公众号