vue.js - 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