[Vue] 20.Vue中的组件：使用具名插槽解决组件内容传递问题

1. 如果子组件调用了没有内容的插槽，若想设置默认值，可在slot标签添加默认显示的内容，如下：

2. 插槽显示顺序及位置问题描述
1）父组件中有页面header和footer的内容
2）子组件有页面content的内容
3）子组件想按照header footer content的顺序显示页面内容
4）如果直接引用父组件的插槽：顺序会变成header footer content

3. 解决2中的问题：
1）父组件告诉子组件将slot分成两个部分：

const app = Vue.createApp({
            template: `
            
                
                
            
            `
        });

注：可以简写成：

const app = Vue.createApp({
            template: `
            
                
                
            
            `
        });

2）子组件调用时说明使用哪个slot

app.component('layout', {
            template: `
            

                
                
content
                
            
            `
        })

之后便可看到拆分slot后的页面内容