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 fallback content. Fallback content is compiled in the child scope and will only be displayed if the hosting element is empty and has no content to be inserted.

来自docs .