vue3 ＜script setup＞自定义组件中，判断 slot 是否有内容。

iZaiZaiA

于 2021-07-13 16:15:03 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_31763107/article/details/118702965

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

3 篇文章

订阅专栏

这篇博客介绍了在 Vue3 中如何使用 `<script setup>` 语法来判断组件的默认插槽和具名插槽是否传入了内容。通过 `useSlots()` 函数获取插槽对象，并检查 `default` 和 `test` 属性是否存在来确定插槽是否有值。示例代码展示了在父组件中向子组件 `test-a` 的默认插槽和具名插槽 `test` 添加内容的情况。

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

vue3 `<script setup>` 自定义组件中，判断 slot 是否有内容。

<template>
    <div>
    	<slot/>
    	<slot name="test"/>
    </div>
</template>

<script lang="ts" setup>
import { useSlots } from "vue";
//判断<slot/>是否有传值
const slotDefault = !!useSlots().default;
//判断<slot name="test"/>是否有传值
const slotTest = !!useSlots().test;
</script>

<template>
    <test-a>
   		<div>default内容</div>
   		<template v-slot:test>test内容</template>
	</test-a>
</template>

<script lang="ts" setup>

</script>