vue组件插槽与做用域插槽

一、在组件中加入自定义的html

slot标签为vue中特有标签，意为插槽，是指在组件中能够自定义插入dom；html

//使用组件：
<box-content>
    <div slot="header">header</div>
    <div slot="footer">footer</div>
</box-content>


//组件实现：
Vue.component('box-content',{
    template:`<div>
        <slot name="header"></slot>
        <div class="main">main</div>
        <slot name="footer"></slot>
    </div>`,
    data:function () {
        return{}
    },
    props:{

    }
});

二、做用域插槽

组件插槽中数据显示形式由父组件决定；：slot="main"为插槽名称，slot-scope="scope"自定义做用域名称，可随意定义

//使用组件
<tem-slot>
    <template slot="main" slot-scope="scope">
        <h3>{{scope.title}}</h3>
        <table>
            <tbody>
             <tr v-for="(item,index) in scope.data"><td>{{item}}</td></tr>
            </tbody>
        </table>
    </template>
</tem-slot>


//组件实现：
    Vue.component('tem-slot',{
        template:  `<div class="tem-slot">
        <slot name="main"
        :data="rows"
        :title="title"></slot>
    </div>`,
        data:function () {
            return{
                rows:[1, 2, 3, 4, 5],
                title:'title'
            }
        },
    });