在子插槽组件

Question

我创建了一个vue组件，我想要执行一些逻辑，并根据该逻辑我想在插槽中呈现任何内容。

<logic-component>
 <div>{{ data }}</div>
</logic-component>

数据是吸气剂：

 get data() { return … }

数据是从全局存储/服务获取的，如果逻辑组件准备就绪，则该数据可以满足。

组件逻辑如下：

<div v-if="logicIsReady"><slot></slot></div>

因此，默认情况下，logicIsReady设置为false，但是getter在之前被调用。

现在，通过vue生命周期，我知道vue尝试解决当前组件绑定，然后将其用于子代。但正如您在这里看到的那样。

仅当v-if为true时，如何才能显示插槽中的任何内容？

有什么我可以做的事吗？

如果我使用v-if代替它可以工作的组件，但这不是我想要的方式。

Answer 1

您可以将v-if逻辑保留在子级中，但是父级将需要更改其语法并使用显式的named slot form：

<logic-component>
  <template #default>
    <div>{{ data }}</div>
  </template>
</logic-component>

默认插槽实际上是名称为“默认”的named slot。通过封装显式template，logic-component可以决定何时渲染它。