Vue 插槽在插槽 v-if 语句启动之前加载异步组件

Question

我遇到了一个问题，即在实际显示之前加载了同步组件 JavaScript。

使用dynamic-import 导入的组件使用v-if 显示，以便在需要时加载它们。当它们被显示时，它们的 JavaScript 也会被加载。但在slot 的情况下，v-if 不会阻止组件已经加载其生成的 JavaScript 块并将其附加到 DOM。

下拉组件：

<template>
    <li class="dropdown" :class="{ open: visible }">
        <div class="heading" @click.stop="toggle">
            <span>{{ heading }}</span>
        </div>

        <div class="slot-content" v-if="visible">
            <slot></slot>
        </div>
    </li>
</template>

在槽中使用带有异步google-map组件的组件：

<dropdown>
    <google-map>
        <map-marker :data="{{ $marker }}"></map-marker>
    </google-map>
</dropdown>

即使插槽有v-if，JavaScript 组件仍在加载中。奇怪的是，mounted 或 created 都没有被触发。因此，除了组件的异步加载之外，似乎一切都遵守适当的规则。

最好我可以将插槽与v-if 一起使用，而不是触发为该async 组件加载生成的块。

如果异步加载显然不是什么大问题，但即使是 HTTP2 在涉及请求时也有其限制。我宁愿在需要时加载它。

Answer 1

来自the doc about Compilation Scope

父模板中的所有内容都在父范围内编译； 子模板中的所有内容都在子范围内编译。

这就是您出现问题的原因。父模板中没有任何内容表明不应渲染组件。

可以通过Scoped Slots

来解决

简单示例：https://jsfiddle.net/jacobgoh101/8kmLpj75/6/

在示例中，只需将<template slot-scope="{}"> 添加到异步组件，它就会强制异步组件等待，直到插槽的父范围可用。 （老实说，我也不知道它的确切内部工作原理）。

在您的情况下，只需添加 <template slot-scope="{}"> 也应该可以解决问题

<dropdown>
    <template slot-scope="{}">
        <google-map>
            <map-marker :data="{{ $marker }}"></map-marker>
        </google-map>
    </template>
</dropdown>