const app = Vue.createApp({
template: `
            <layout>
                <div>...父组件...</div>
                <template v-slot:header>
                    <h1>header</h1>
                    <div>...page title...</div>
                </template>

                <h2>Main Content</h2>
                <p>... Paragraph 1 ...</p>
                <p>... Paragraph 2 ...</p>

                <template v-slot:footer>
                    <h2>footer</h2>
                    <p>...footer info...</p>
                </template>
   
            </layout>
        `
});

app.component('layout', {
template: `
        <div class="container">
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
        `
});

const vm = app.mount('#root');

问题描述：

<div>...父组件...</div>

​  会分配到<main>这一div里面去呢？我的理解是：不是具名插槽<skot name=xxx>包裹的部分都被放入匿名插槽<slot></slot>里面去了，不知道理解的对不对？

相关截图：