一、插槽的作用
在开发过程中，我们经常包装可重复使用的组件：
我们将在前面通过props将一些数据传递给组件进行显示； 但是，为了使组件具有更强的通用性，我们不能将组件中的内容限制为固定div、span等等这些元素；例如，在某些情况下，我们使用组件，希望组件显示一个按钮，在某些情况下，我们使用组件希望显示一张图片，我们应该让用户决定在某个区域存储什么内容和元素。
二、插槽类型不同
在定义组件时，在template中用slot占坑；使用时，填坑组件之间的内容。
默认插槽代码显示：
插槽预留位置，为以后的扩展做准备，直接用于模板slot标签即可。
插槽可以接具有默认值slot设置组件可以是自定义组件或系统标签。使用时，直接填写自定义标签并扩展内容（可以是另一个组件，娃娃）。如果没有填充，则使用默认值填充。
插槽只有一个slot标签并不意味着只能在组件标签中填写一个标签html可填充任何一个标签，整体用于更换插槽。
定义： <slot name="xxx">
使用：
- <template #xxx></template>;
- <template v-slot:xxx></template>
- 输入标签可分别分发给不同的标签slot位置
- v-slot一般跟template标签使用 (template是html5.新标签内容模板元素， 不会渲染到页面上, 一般被vue分析为内部标签)
显示具名插槽代码：
多个插槽可以预留在模板中，而不是只有一个。
每个插槽可以取一个具体的名字，也可以不取。如果不取，在组件中使用插槽，所有未取的名字都将被替换。
我们可以给需要区域更换的插槽取名，然后在组件中使用特定的标签/子组件slot绑定插槽名称的属性可以实现局部替换。
v-bind可省略：
v-on: 可以省略成@
v-slot: 可简化为##
目标: 子组件中的数据， 在给插槽赋值时，在父组件环境使用=> 子传父=》传数据
- 创建子组件， 准备slot, 在slot绑定属性和子组件值
- 使用子组件， 自定义标签， 用template和v-slot="自定义变量名"
- 自定义变量名将自动绑定slot上述所有属性， 子组件子组件内值， 并替换slot位置
变量绑定在组件中slot上, 然后使用组件v-slot:插槽名字="变量" ，会绑定变量slot传递的属性和值，插槽可以自定义显示内容； 自定义显示内容可以取出组件中的值。
应用场景：允许用户传输自定义表组件：自定义结构 数据(从插槽中返回)
传递html结构内容
- 默认插槽 =》1. 不使用子组件标签template写html结构 2. 子组件通过
- 具名插槽 => 1. 使用子组件标签template =》包裹传递html结构 =》template提供名称#插槽名 2. 数据通过子组件传输=》子传父
- 作用域插槽=> 1. 子组件<slot name="插槽名" :传输数据的名称="变量"> 2. 父组件=》<template #插槽名="接收数据对象">
动态化复用组件的内容结构和数据=》提高组件的可重用性。