插槽slot就是子组件提供给父组件使用的占位符,使用<slot></slot>
表示,可以填充任何模板代码
插槽有 匿名插槽,具名插槽,作用域插槽,动态插槽
1. 匿名插槽
1.子组件创建插槽
<template>
<div>
<slot></slot>
</div>
<template>
- 父组件使用插槽
<SlotDialog>
<template v-slot>
<div>123</div>
</template
</SlotDialog>
或
<SlotDialog>
<template #default>
<div>123</div>
</template
</SlotDialog>
2. 具名插槽
- 创建插槽
<slot name="footer"></slot>
- 使用
<template v-slot:footer>
<div>
底部
</div>
</template>
或
<template #footer>
<div>
底部
</div>
</template>
作用域插槽
<main class="main">
<div v-for="(item,index) in data">
<slot :data="item" :index="index"></slot>
</div>
</main>
<script setup lang=ts>
import {reactive} from "vue"
type names = {
name: string,
age: number
}
const data = reactive<names[]>([
{
name: "唐僧",
age: 18
},
{
name: "孙悟空",
age: 600
},
{
name: "猪八戒",
age: 300
},
])
</script>
- 使用
<template #default="{data,index}">
<div>
{{ data.name }} - {{ data.age }} - {{ index }}
</div>
</template>
动态插槽
<template #[slotName]>
头部
</template>
<script setup lang=ts>
const slotName = ref('header')
</script>