1. 作用
让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件向子组件通信。
2. 分类
- 默认插槽
- 具名插槽
- 作用域插槽
3. 使用方式
1.默认插槽
//父组件
<Category>
<div>html结构</div>
</Category>
//子组件
<template>
<div>
<!--定义插槽-->
<slot>插槽默认的内容</slot>
</div>
</template>
- 具名插槽：也就是给插槽起名字
//父组件
<Category>
<template slot="center">
<div>html结构</div>
</template>
<template slot="footer">
<div>html结构</div>
</template>
</Category>
//子组件
<template>
<div>
<!--定义插槽-->
<slot name="center">插槽默认的内容</slot>
<slot name="footer">插槽默认的内容</slot>
</div>
</template>
- 作用域插槽
- 理解：数据在定义插槽的组件里，但是根据数据生成的结构需要组件的使用者决定。（比如：games 数据在 Category组件中，但是使用数据所遍历出来的结构由 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标题
<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"],
//数据在子组件
data(){
return {
games:["游戏a","游戏b","游戏c"]
}
}
}
</script>
