vue中插槽的使用

1、具名插槽
<div class="">
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="mainContanier"></slot>
</mian>
<flooter >
<slot name="flooter" ></flooter>
</flooter>
</div>

插槽内容

<base-loyout>
<h1 slot="header"></h1>
<h2 slot="flooter"></h2>
<base-loyout>
做用域插槽
2、父组件对子组件的加工处理
在子组件中先定义
<ul>
<li v-for="item in list">
<slot v-bind:item=item>{{item.name}}</slot>
<li>
</ul>
下面是在父组件使用
<子组件标签 v-bind:list=list>
<template slot-scope="slotProps">
{{slotProp,info.item}}
</template>
</子组件标签>