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

2023-12-30 08:12:40 浏览数 (2)

两种方法:

1、通过 this.$slots.name

代码语言:javascript复制
<div class="btn-icon" v-if="$slots.icon">
      <slot name="icon"></slot>
 </div>

2、通过 useSlots 判断

代码语言:javascript复制
<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>

0 人点赞