一、作用
父组件可以向子组件指定位置插入html结构，也是一种通信方式，适用于 父组件=>子组件
二、分类
默认插槽、具名插槽(有具体名字的插槽)、作用域插槽
三、使用方式
1、默认插槽
父组件
<Category title="美食" ><ul> <li v-for="data,index in foods" :key="index"> {{data}}</li></ul>
</Category>
子组件 Category.vue文件中
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义默认插槽，用来接收父组件传递的html结构 --><slot>插槽默认内容</slot></div>
</template>
2、具名插槽
场景：父组件向子组件插入多个html结构，需要具名插槽
子组件：命名插槽，关键字name
父组件：使用插槽，slot=子组件的插槽名，最好用<template></template>包裹，不影响结构
-----------
父组件
<!-- 父组件 --> <template slot="center"><ul> <li v-for="data,index in foods" :key="index"> {{data}}</li></ul> </template><template slot="footer"><a href="https://www.baidu.com">百度一下</a> </template>
子组件
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义默认插槽，用来接收父组件传递的html结构 --><slot name="center">插槽默认内容ul li</slot><slot name="footer">插槽内容 a 标签</slot></div> </template>
3、作用域插槽
场景：父组件向子组件传递html结构，html结构需要使用数据，但是数据在子组件里，需要使用作用域插槽实现
子组件在slot中 动态绑定值 :test="test"
父组件想要插入的html 外包的 <template scop="xx"></template>,xx是定义的值，获取值需要通过xx.test 或 scop="{test}"
父组件
<Category title="美食" ><!-- 父组件 --><!-- 接收值第一种方法 --><template scope="abc"><ul> <li v-for="data,index in abc.foods" :key="index"> {{data}}</li></ul></template></Category><Category title="美食" ><!-- 父组件 --><!-- 接收值第二种方法--><template scope="{foods}"><ul> <li v-for="data,index in foods" :key="index"> {{data}}</li></ul></template> </Category>
子组件
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义默认插槽，用来接收父组件传递的html结构 --><slot :foods="foods">插槽默认内容ul li</slot></div> </template>
