vue3 如何判断组件中的 slot 是否有填充？

蓓蕾心晴

发布于 2023-12-30 08:12:40

2580

发布于 2023-12-30 08:12:40

两种方法：

1、通过 this.$slots.name

<div class="btn-icon" v-if="$slots.icon">
      <slot name="icon"></slot>
 </div>

2、通过 useSlots 判断

<template>
    <div>
        <slot/>
        <slot name="test"/>
        <span v-if=slotTest>123</span>
    </div>
</template>

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-12-29，如有侵权请联系 cloudcommunity@tencent.com 删除

default