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>

然而，一旦我用 class 包裹它，就再也没有显示了。

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

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

Answer 1

它不起作用，因为您的 "wrapped slot" 不是 responsive-menu 标签的直接子标签。

尝试这样的事情：

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

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

Vue named slots do not work when wrapped

vue.js

vue-component

vuejs2