vue 插槽slot

(1)
        父组件代码
        <chlid><h1>guojing</h1></child>

        子组件 child.vue
        <template>
            <div>
                <p>afjladjfl</p>
                <slot></slot>
            </div>
        </template>
(2)具名插槽
        父组件代码（1）
        <child>
            <template slot="header">
                <h1>Here might be a page title</h1>
            </template>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
            <template slot="footer">
                <p>Here's some contact info</p>
            </template>
        </child>
        或者：父组件代码（2）
        <child>
            <h1 slot="header">Here might be a page title</h1>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
            <p slot="footer">Here's some contact info</p>
        </child>

        子组件child.vue
        <template>
            <div class="container">
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
        </template>
(3)作用域插槽
        父组件代码
        <child>
            <template scope='xxx'>
                <span>from parent</span>
                <span>{{xxx.say}}</span>
            </template>
        </child>
        子组件
        <template>
            <div>
                <slot :say="from child"></slot>
            </div>
        </template>

        或者：

        父组件代码
        <child :childlist="items">
            <template slot="name001" scope='xxx'>
                <li>{{xxx.thing}}</li>
            </template>
        </child>
        子组件
        <template>
            <ul>
                <slot name=:"name001" v-for="item in childlist" :thing="item.what"></slot>
            </ul>
        </template>