javascript - 如果插槽未从父级传递，则进行条件渲染

Question

以下面的代码为例:

<header>
  <slot name='header'></slot>
  <template v-if='?'>
    <h1>{{ someInput }}</h1>
  </template>
</header>

我想显示 <h1>{{ some input }}</h1>如果没有任何东西通过插槽。我可以使用什么作为 v-if 中的条件？

Answer 1

这就够了:

<header>
  <slot name='header'>
    <h1>{{ someInput }}</h1>
  </slot>
</header>

Anything originally inside the tags is considered fallbackcontent. Fallback content is compiled in the child scope and will onlybe displayed if the hosting element is empty and has no content to beinserted.

来自 docs .