Vue命名的插槽在包装时不起作用

Question

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

<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组件的直接子节点？

Answer 1

它不起作用，因为你的＆＃34;包裹的插槽＆＃34;不是响应式菜单标签的直接孩子。

尝试类似的事情：

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

jsfiddle

Answer 2

它适用于 Vue >= 2.6。只需升级 vue 和 vue-template-compiler。