在Vue中我們都是用過slot，但是如果更高的定義與使用是個難題谷遂，本文就帶你解鎖這個技能葬馋。
直接上代碼
- 組件部分
<template>
<div class="view">
<div class="header">
<slot></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="foot">
<slot name="foot" v-bind="{isShow:true}"></slot>
</div>
</div>
</template>
- 使用
<template>
<div class="view">
<component0>
<template>
<div>頭部(默認插槽)</div>
</template>
<template v-slot:content>
<div>內(nèi)容（具名插槽）</div>
</template>
<template v-slot:foot="param">
<div>尾部內(nèi)容</div>
<div v-if="param.isShow">是否展示尾部 備案說明（作用域插槽）</div>
</template>
</component0>
</div>
</template>
<script>
import component0 from "./component0";
export default {
components: {
component0,
},
};
</script>
個人理解
- slot 用的好就是事半功倍，用的不好就是坑后人
- slot 中配合使用其他組件達到組件的組合使用
- 作用于slot 多用于動態(tài)組件中
