vue3的插槽匿名插槽、具名插槽、作用域插槽、动态插槽

本文链接：https://blog.youkuaiyun.com/weixin_39838846/article/details/125967376

本文详细介绍了Vue.js中的四种插槽用法：匿名插槽用于在子组件中插入内容；具名插槽通过name属性指定插槽位置；作用域插槽允许父组件访问子组件的数据；动态插槽则能根据变量动态改变插槽内容。通过示例代码展示了如何在父组件和子组件中实现这些插槽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>