在插槽组件上切换v-if？

Question

我正在尝试使用intersectionObserver来阻止加载组件，直到它们滚动到视图中，如下所示：

用法示例：

<lazy-component>
    <newsletter slot-scope="{}"></newsletter>
</lazy-component

惰性组件是一个包含此模板的单个文件组件：

LazyComponent.vue

<template>
    <span>
        <slot v-if="visible"></slot>
    </span>
</template>

如果我没有在其上添加slot-scope，则会呈现新闻稿组件，因为它首先呈现，然后才会使用v-if语句插入到插槽中。

此时组件已加载，如果这将是async组件，其Javascript也将被加载。这就是我想要阻止的。

虽然slot-scope有效，但这种感觉非常糟糕，而且其他用户也不清楚。

是否可以在模板中的组件上设置v-if到false，并让lazy-component以某种方式手动将v-if设置为true ？

Answer 1

如果我理解正确，您可以将visible作为数据传递到广告位。

<强> LazyComponent.vue

<template>
    <span>
        <slot :visible="visible"></slot>
    </span>
</template>

使用LazyComponent

<lazy-component>
    <newsletter slot-scope="{visible}" v-if="visible"></newsletter>
</lazy-component