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

它不起作用,因为你的"包装槽"不是响应式菜单标签的直接子.

尝试这样的事情:

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

的jsfiddle