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'
}
},
});