在插槽组件上切换 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