如何将插槽传递给 Vue 3 中的孙子组件？答案

【问题标题】：How can I pass down slots to a grandchild component in Vue 3?如何将插槽传递给 Vue 3 中的孙子组件？
【发布时间】：2020-11-11 20:00:45
【问题描述】：

如果我有一个包含几个插槽的layout 组件，是否可以让layout 中的组件填充这些插槽？

JS Fiddle

<div id="app">
    <layout>
        <page></page>
    </layout>
</div>

const app = Vue.createApp({});

app.component('layout', {
    template: `
        <header>
            <slot name="header"></slot>
        </header>

        <main>
            <slot name="main"></slot>
        </main>
    `,
});

app.component('page', {
    template: `
        <!--
            is there a way fill each slot of "layout"? i.e.
            
            <template #header>
                <h1>Page Header</h1>
            </template>
            
            <template #main>
                <h1>Page Content</h1>
            </template>
        -->
    `,
});

app.mount('#app');

【问题讨论】：

你想向下钻取插槽吗？
@BoussadjraBrahim 嗨，Brahim，这听起来是正确的说法。我已经尝试了一些来自 Github 问题 (for example) 的建议，但到目前为止没有任何效果。
好的，让我了解您的用例，希望我能找到解决方案
我想我误会了你，你想暴露页面的槽位作为布局槽位吗？
@BoussadjraBrahim 反过来，我希望layout 中定义的插槽从page 填充。我开始意识到没有渲染功能可能是不可能的。我的用例并不重要，所以我会找到另一个解决方案。我将把这个问题留给未来的任何答案。

标签： javascript vue.js vuejs3

【解决方案1】：

似乎我正在寻找的东西在其他地方被称为template blocks。这不是 Evan You（Vue 的创建者）目前支持的东西，因为他认为这个功能不会为增加的复杂性增加足够的价值。

一些有趣的链接：

【讨论】：