匿名插槽
子组件
<template>
<div>
<div class="content">
<header>
// 插槽站位符
<slot></slot>
</header>
<main></main>
<footer></footer>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.content {
display: flex;
header {
flex: 1;
height: 500px;
background-color: skyblue;
}
main {
flex: 1;
height: 500px;
background-color: pink;
}
footer {
flex: 1;
height: 500px;
background-color: orange;
}
}
</style>
父组件
<template>
<div>
<slotTest>
// 插槽模板
<template #default>
<div>
header的插槽
</div>
</template>
</slotTest>
</div>
</template>
<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>
<style scoped lang="less">
</style>
具名插槽
子组件
<template>
<div>
<div class="content">
<header></header>
<main>
<slot name="mainSlot"></slot>
</main>
<footer></footer>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.content {
display: flex;
header {
flex: 1;
height: 500px;
background-color: skyblue;
}
main {
flex: 1;
height: 500px;
background-color: pink;
}
footer {
flex: 1;
height: 500px;
background-color: orange;
}
}
</style>
父组件
<template>
<div>
<slotTest>
<template #mainSlot>
<div>
main的插槽
</div>
</template>
</slotTest>
</div>
</template>
<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>
<style scoped lang="less">
</style>
插槽作用域
插槽模板传值
<template>
<div>
<div class="content">
<header></header>
<main></main>
<footer>
<slot name="dataSlot" :index="0" ></slot>
</footer>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.content {
display: flex;
header {
flex: 1;
height: 500px;
background-color: skyblue;
}
main {
flex: 1;
height: 500px;
background-color: pink;
}
footer {
flex: 1;
height: 500px;
background-color: orange;
}
}
</style>
父组件接收值
<template>
<div>
<slotTest>
<template #dataSlot="{ index }">
<div>
footer插槽接收值{{ index }}
</div>
</template>
</slotTest>
</div>
</template>
<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>
<style scoped lang="less">
</style>
动态插槽
子组件设置好插槽模板
<template>
<div>
<div class="content">
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.content {
width: 100vw;
display: flex;
header {
flex: 1;
height: 500px;
background-color: skyblue;
}
main {
flex: 1;
height: 500px;
background-color: pink;
}
footer {
flex: 1;
height: 500px;
background-color: orange;
}
}
</style>
父组件动态插入
<template>
<div>
<A>
<template #[slotName]>
<div>
头在{{ slotName }}
</div>
</template>
</A>
</div>
</template>
<script setup lang="ts">
import A from './components/A.vue'
const slotName = 'header'
</script>
<style scoped lang="less">
</style>