javascript - Vue slot 在 slot v-if 语句开始之前加载异步组件

Question

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

使用 dynamic-import 导入的组件在需要时使用 v-if 显示以加载它们。当它们被显示时，它们的 JavaScript 也会被加载。但在 slot 的情况下，v-if 不会阻止组件加载其生成的 JavaScript block 并将其附加到 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 组件加载生成的 block 。

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

Answer 1

来自 the doc about Compilation Scope

Everything in the parent template is compiled in parent scope;everything in the child template is compiled in the child 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>