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>
</子組件標籤>