1. 作用
讓父組件可以向子組件指定位置插入 html 結(jié)構(gòu)士八，也是一種組件間通信的方式庇忌，適用于父組件向子組件通信乡范。
2. 分類
- 默認(rèn)插槽
- 具名插槽
- 作用域插槽
3. 使用方式
1.默認(rèn)插槽
//父組件
<Category>
<div>html結(jié)構(gòu)</div>
</Category>
//子組件
<template>
<div>
<!--定義插槽-->
<slot>插槽默認(rèn)的內(nèi)容</slot>
</div>
</template>
- 具名插槽：也就是給插槽起名字
//父組件
<Category>
<template slot="center">
<div>html結(jié)構(gòu)</div>
</template>
<template slot="footer">
<div>html結(jié)構(gòu)</div>
</template>
</Category>
//子組件
<template>
<div>
<!--定義插槽-->
<slot name="center">插槽默認(rèn)的內(nèi)容</slot>
<slot name="footer">插槽默認(rèn)的內(nèi)容</slot>
</div>
</template>
- 作用域插槽
- 理解：數(shù)據(jù)在定義插槽的組件里困后，但是根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者決定豆胸。（比如：games 數(shù)據(jù)在 Category組件中杨耙，但是使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由 App 組件中決定赤套。）
- 具體編碼示例
父組件：App.vue
//父組件
<Category>
<template scope="scopeData">
//生成ul列表
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template slot-scope="scopeData">
//生成h4標(biāo)題
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子組件：Category.vue
<template>
<div>
<slot :games="games"></slot>
<div>
</template>
<script>
export default{
name:"Category",
props:["title"],
//數(shù)據(jù)在子組件
data(){
return {
games:["游戲a","游戲b","游戲c"]
}
}
}
</script>
