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仍在加载。奇怪的是，无论是骑的还是被创造的，都没有被发射。因此，似乎一切都遵循适当的规则，除了组件的异步加载。

最好我可以使用带有v-if的插槽，而不是为这个async组件触发生成块的加载。

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

Answer 1

来自关于编译范围的文档

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

所以你的问题才会发生。父模板中没有指示不应呈现组件的任何内容。

它可以用作用域槽来解决。

简单示例：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>