Question

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

<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

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

一些有趣的链接：

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

1 个答案: