slot插槽的用法

1. 基本用法

父页面向子组件里插入的标签(一般情况下, 插入单个)

<div id="app">
    <child>
        <p>my name is Tom!</p>
    </child>
</div>

Vue.component('child', {
        template:
        `<div>
            <p>hello,</p>
            <slot></slot>
        </div>`,
    });
    let vm = new Vue({
        el: '#app',
});

2. 具名用法

父页面向子组件里插入多个标签

    <div id="app">
        <contentbox>
            <div slot="header">这是头部</div>
            <div slot="footer">这是脚部</div>
        </contentbox>
    </div>
    
    Vue.component('contentbox', {
        template: `
            <div>
                <slot name="header"></slot>
                <div>内容区</div>
                <slot name="footer"></slot>
            </div>`,
    });
    let app = new Vue({
        el: '#app',
    });

3. 作用域用法

父页面可以根据实际需求向子组件里插入不同的标签

<div id="app">
        <child>
            <template slot-scope="props">
                <div>{{props.item}}</div>
            </template>
        </child>
    </div>
    
    Vue.component('child', {
        data() {
            return {
                list: [1, 2, 3, 4]
            }
        },
        template: `
        <div>
            <slot
            v-for="item of list"
            :item="item">
            </slot>
        </div>`,
    });
    let app = new Vue({
        el: '#app',
    });