1、匿名插槽

①父组件代码

<template>
	<div class="home_main">
		<Dialog>
			<template v-slot>
				<div>
					中间有内容插入了
				</div>
			</template>
		</Dialog>
	</div>
</template>

<script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue"
import { reactive, ref, markRaw } from "vue";

</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100vh;
	background: green;
	font-size: 30px;
}
</style>

②子组件代码加入占位slot

<template>
    <div class="dialog_main">
        <header class="header">
        </header>
        <main class="main">
            <slot></slot>
        </main>
        <footer class="footer"></footer>
    </div>
</template>

<script lang='ts' setup>
</script>

<style scoped lang="scss">
.dialog_main {
    .header {
        height: 20vh;
        background: red;
        width: 100%;
    }
    .main {
        height: 50vh;
        width: 100%;
        background: yellow;
    }

    .footer {
        height: 30vh;
        width: 100%;
        background: blue;
    }
}
</style>

2、具名插槽
①子组件代码 name=”名字“

②父组件代码使用v-slot:name来使用并且他们可以简写v-slot:name简写为#name 如下：
v-slot:header 简写#header

<template>
	<div class="home_main">
		<Dialog>
			<template #header>
				<div>
					我是头部的内容
				</div>
			</template>
			<template v-slot:main>
				<div>
					中间有内容插入了
				</div>
			</template>
			<template v-slot:footer>
				<div>
					我是底部内容
				</div>
			</template>
		</Dialog>
	</div>
</template>

<script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue"
import { reactive, ref, markRaw } from "vue";

</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100vh;
	background: green;
	font-size: 30px;


}
</style>

是不是你想要的效果如下：

3、作用域插槽
①父组件写法 v-slot=“{子组件插槽定义的值}”,多个值写法v-slot=“{ data,index }”,同时这里也可以简写
#default=“{ data,index }” 这样就可以了

<template>
	<div class="home_main">
		<Dialog>
			<template #header>
				<div>
					我是头部的内容
				</div>
			</template>

			<template v-slot="{ data,index }">
				<div>
					{{ data.name }}--{{ data.age }}--{{index}}
				</div>
			</template>
			<template #footer>
				<div>
					我是底部内容
				</div>
			</template>
		</Dialog>
	</div>
</template>

<script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue"

</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100vh;
	background: green;
	font-size: 30px;
}
</style>

②子组件写法可以传多个值

<template>
    <div class="dialog_main">
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="main">
            <div v-for="(item, index) in dataList" :key="index">
                <slot :data="item" :index="index"></slot>    
            </div>

        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script lang='ts' setup>
import { reactive } from "vue";
type names = {
    name: string,
    age: number
}
const dataList = reactive<names[]>([{
    name: '小林',
    age: 26
},
{
    name: '小王',
    age: 27
}, {
    name: '小李',
    age: 28
}, {
    name: '小石',
    age: 29
}, {
    name: '小林',
    age: 26
}])
</script>

<style scoped lang="scss">
.dialog_main {
    .header {
        height: 20vh;
        background: red;
        width: 100%;
    }

    .main {
        height: 50vh;
        width: 100%;
        background: yellow;
    }

    .footer {
        height: 30vh;
        width: 100%;
        background: blue;
    }
}
</style>

4、动态插槽
①父组件中，可以动态改变插槽的值
如下 ： slotName的值可以动态的修改我们改为footer内容就会显示到footer,我们改为header就会显示到header

②子组件代码不变跟3一样这里就不写了