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

Question

If I have a layout component that contains a few slots, is it possible to have a component within layout populate those slots?

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');

Answer 1

It seems what I'm looking for is being referred to as template blocks in other places. This is not something Evan You (the creator of Vue) currently supports as he doesn't believe this functionality adds enough value for the added complexity.

Some interesting links:

• Template blocks for component inheritence (proposed syntax )
• Possible upcoming third-party package to achieve this
• Example of using Pug with it's concepts of block and extends