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

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

<template>
    <div><slot></slot></div>
</template>

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

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

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

<template>
    <divv-if="!!isHaveSlot.default"><slot></slot></div>

</template>

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

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

defineSlots是vue3的一个返回组件内可用插槽的函数，通过该函数，可以判断可用的slot是否被使用

使用方式：

const isHaveSlot = defineSlots();

 v-if="!!isHaveSlot.default"

如果你的slot没有写name值，那么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