vue组件插槽

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

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

//使用组件：
<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:{

}
});

2、作用域插槽

组件插槽中数据显示形式由父组件决定；：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'
}
},
});