2024-07-29 如何判断自定义组件中的slot是否被传入值==》defineSlots或this.$slots

假如你的自定义组件是这样：

<template>
    <div>
        <button :class="`btn-${type}`">
            <slot></slot>
        </button>
    </div>
</template>

<script>
export default {
    name: "tButton",
};
</script>

<script setup>
const props = defineProps({
    type: {
        type: String,
        default: "primary",
    },
});
</script>

那么怎么判断你在使用时，比如<t-button></t-button>，在该组件里面有没有使用到插槽slot呢？

解决方案：在tbutton组件里面的onMountd钩子判断slot是否有值

<template>
    <div>
        <button :class="`btn-${type}`">
            <slot></slot>
        </button>
    </div>
</template>

<script>
export default {
    name: "tButton",
};
</script>

<script setup>
import {defineSlots, onMounted} from "vue";
const props = defineProps({
    type: {
        type: String,
        default: "primary",
    },
});
const isHaveSlot = defineSlots();

onMounted(() => {
    console.log("isHaveSlot",!!isHaveSlot.default,isHaveSlot);
});
</script>

引入defineSlots、onMounted钩子，把defineSlots赋值给变量a，在onMountd里面判断a是否有值

如果你的slot没有写name值，那么默认就是一个default，如果你写了多个slot且没有name值，那么slot还是只有default作为name值，判断该值是否为空即可

如果你的slot定义了name值为uisk，那么你就要判断a.uisk是否为空了

没写就default，有写就用你写的name

注意：上面是vue3的用法，如果是vue2，那就直接在tbutton组件判断this.$slots的default是否为空，同理，有些name值，就判断this.$slots.你的name是否为空

ps：vue3中使用slot的name插槽用法：v-slot:你的name