2024-07-29 如何判斷自定義元件中的slot是否被傳入值==》defineSlots或this.$slots

叶乘风發表於2024-07-29
元件

假如你的自定義元件是這樣：

<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}`" v-if="isHaveSlot.default">
            <slot></slot>
        </button>
    </div>
</template>

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

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

引入defineSlots鉤子，把defineSlots賦值給變數a，判斷a.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

相關文章