Vue3，仅当其内部的槽有内容时才渲染父div

Question

仅当标题中有文本或填充槽时，我才尝试渲染标题。

我尝试过：

<div
            class="flex py-sm px-md w-full align-middle rounded-t-xl"
            v-if="props.title || $slots.header"
            :class="[`bg-${props.headerColor}`]"
        >
            <p class="text-bo-xl font-bold" :class="`text-${props.titleTextColor}`">
                {{ props.title }}
            </p>
            <slot name="header"></slot>
        </div>

但是 div 无论如何都会渲染，即使插槽是空的。我认为即使该插槽未填充，它也会考虑该插槽存在。

有什么想法吗？

Answer 1

抱歉回复晚了。如果我使用

computed()

它似乎有效：

<template>
  <section>
    <h4>lorem</h4>
    <div v-if="hasHeaderSlot">
      <h2>ipsum</h2>
      <slot name="header"></slot>
    </div>
  </section>
</template>

<script>
import { computed } from 'vue';

export default {
  setup(_, { slots }) {
    const hasHeaderSlot = computed(() => slots.header && slots.header());

    return {
      hasHeaderSlot,
    };
  },
};
</script>