Vue.js 包装时，Vue命名插槽不起作用

我有一个响应菜单组件，我想在我的模板标记中使用其中的命名插槽：

<template>
    <div class="responsive-menu">
        <div class="menu-header">
            <slot name="header"></slot>
        </div>
    </div>
</template>

每当我尝试这样命名的插槽时，它都工作得非常好：

<responsive-menu>
    <h3 slot="header">Responsive menu header</h3>
</responsive-menu>

响应菜单标题

然而，一旦我用一个类来结束它，就再也看不到任何东西了

<responsive-menu>
    <div class="container">
        <h3 slot="header">Responsive menu header</h3>
    </div>
</responsive-menu>

响应菜单标题

---

这是怎么回事？我不应该只包装命名的组件吗？我的命名插槽似乎需要是我的Vue组件的直接子级吗？

它不起作用，因为您的“包装插槽”不是响应菜单标记的直接子级

试试这样：

<responsive-menu>
    <div class="container" slot="header">
        <h3>Responsive menu header</h3>
    </div>
</responsive-menu>

响应菜单标题

---

它与Vue>=2.6一起工作。只需升级vue和vue模板编译器。

Umm。。我复制了你的，它能工作吗？@AmreshVenugopal你正在使用一个标题槽，但是你的html没有任何对这个槽的引用。这意味着它将返回到默认的插槽内容。顺便说一下，我正在使用带有

.vue

组件的webpack，如果我能启动并运行webpackbin文件，我会尝试。我唯一能想到的是OP实际上正在做

…

。如果不是这样的话，这个就可以了。我没有注册组件，现在我看到它被屏蔽了。插槽不需要是直接的子插槽。我已经尝试过了，它不需要是直接的子插槽：但是这个示例有一个问题，因为我的模板中围绕命名插槽的所有标记都完全消失了。在我当前的代码库中，我仍然无法使其正常工作。如果slot不是直接子对象，则slot属性将被忽略，组件标记的整个内容将用作组件模板标记中默认slot的内容。@Stephan-v这应该可以证明答案。@AmreshVenugopal那么您如何使特定的小提琴正常工作？我从来没有试过拆下容器，但一切都正常。我真的很想知道这是一个错误，还是这是注定要发生的。