具名插槽实例

    <div id="app">
        <app-layout>
            <h1 slot="header">这里可能是一个页面标题</h1> //我的男朋友叫header，我要找它
            <p>主要内容的一个段落</p> //我是单身狗
            <p>另一个主要段落</p> //我是单身狗
            <p slot="footer">还有一些联系信息</p> //我的男朋友叫footer，我要找它
        </app-layout>
    </div>

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

    
      Vue.component(‘app-layout‘,{
            template:‘                <div class="container">                    <header>                        <slot name="header"></slot>\ //具名插槽 嗨，我的名字叫header，我的女朋友在哪？
                    </header>                    <main>                        <slot></slot>\ //匿名插槽 单身狗都来我这里！！！
                    </main>                    <footer>                        <slot name="footer"></slot>\ //具名插槽 嗨，我的名字叫footer,我的女朋友在哪？
                    </footer>                </div>            ‘
        })
        new Vue({
            el:‘#app‘
        })