1、什么是插槽
VUE官方文档说明：
Vue实现了一组用于内容分发的API，其中元素作为承载分发内容的出口。
个人理解：
插槽实质上是子组件的扩展，通过插槽将内容传递到组件内部的指定位置。
或者说：
slot的出现是为了使父组件能够堂而皇之地对子组件添加内容。
打个比方：
有句话叫萝卜有洞。 要使父组件在子组件中种植萝卜，必须在子组件中挖洞。 【萝卜穴】。 父组件想添加到子组件中的内容是【萝卜】。
由此可见，不种萝卜，种什么萝卜由母汇编控制； 萝卜的洞在哪里？ 子组件控制。 也就是说，插槽不显示或如何显示由父组件控制，而插槽显示的位置由子组件控制。
举个例子吧。 在Father父部件内部使用名为Child的子部件，将一些内容传递到子部件内部的“指定位置”。 可以写如下。
Child的标题我是萝卜洞
Father的标题我是萝卜~
请看执行结果：
Father的标题
标题
我是萝卜~
不，就像父部件的萝卜种在子部件的孔里一样吗？
看到这里，不由得发出了“这不是父组件向子组件传递了值吗”的灵魂。 那和props有什么不同？
2、slot与props的区别：在props属性中，父组件可以将属性、方法传递给子组件，但父组件不能传递属性中已标记的内容，甚至组件
就这样
Father的标题我是按钮
3、插槽使用
)1)匿名插槽(单个插槽、默认插槽) )。
匿名插槽是指未设置name属性的插槽。
可以将其放置在组件的任意位置。
一个组件只能有一个这样的插槽。
作为找不到一致内容剪辑时的备用插槽。
匿名插槽只能用作没有slot属性的元素的插槽。
子组件头部的缺省值
主体默认值
这是匿名插槽。 没有name属性。 此字符串是匿名插槽的默认值。
父母汇编我是主体
我是其他内容
我是尾巴
执行效果：
父组件
子组件
头部默认值(头部默认值已渲染)。 默认值仅在未提供内容时进行渲染。 ）
我是主体(body的默认是覆盖的) )。
我是其他内容(名槽的默认设置是覆盖的) )。
我是尾巴
——已丢弃，因为子部件中没有name='footer '的插槽。 如果子组件中不存在匿名插槽
我是其他内容
被扔掉。 )2)命名插槽
意味着具有名称的插槽，名称由属性name定义。
一个组件可以有多个命名的插槽，它们显示在不同的位置。
可以在单个元素中使用v-slot命令，并将插槽名称指定为v-slot参数。
我是头儿。 我是main的内容111
我也是主内容222
我是福斯特
未包含在标记为v-slot的template中的内容将被视为默认插槽中的内容。
没有name的插槽具有默认名称。 如果要更明确一些，可以将缺省插槽的内容合并到一起。
我是头儿。 我是main的内容111
我也是主内容222
我是福斯特
两种写法的渲染效果相同。
我是头儿。 我是main的内容111
我也是主内容222
我是福斯特
请注意，只能将v-slot添加到(只有一个例外)。
)3)作用域插槽
hey，我是组件Child的标题export default {
数据()。
return{
childUser:{Name:'Tom '，Age:23}
}
}
使用Child组件时，希望访问Child中的数据childUser并将其显示在插槽的位置。
hey，我是父程序集Father的标题{{childUser.Name}}。
{{childUser.Age}}
但是，上述代码无法正常工作
因为父模板的所有内容都是使用父作用域编译的； 子级模板的所有内容都将在子作用域中进行编译。
虽然只有组件可以访问childUser，但提供的内容【{{childUser.Name}}、{{childUser.Age}}将在父级进行渲染。
为了让
childUser 在父级的插槽内容中可用，需要把 childUser 从 子级作用域传递到 父级作用域。做法就是将 childUser 作为 元素的一个属性绑定上去：
hey，我是组件Child的标题export default {
data() {
return{
childUser:{Name:"Tom",Age:23}
}
}
绑定在 元素上的 属性childData被称为插槽 prop。
现在在父级作用域中，我们可以使用带值的 v-slot 来定义 插槽 prop 的名字：
hey，我是父组件Father的标题{{ slotProps.childData.Name}}
{{ slotProps.childData.Age}}
在这个例子中，我们将包含 [ 所有插槽 prop 的对象 ] 命名为 slotProps，也可以自定义。
因为在上述情况下，被提供的内容只有默认插槽，组件的标签可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
hey，我是父组件Father的标题{{ slotProps.childData.Name}}
{{ slotProps.childData.Age}}
这种写法还可以更简单。就像未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
hey，我是父组件Father的标题{{ slotProps.childData.Name }}
{{ slotProps.childData.Age}}
但是默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
{{ slotProps.childData.Name }}
slotProps is NOT available here
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：
{{ slotProps.childData.Name }}
...
4、解构插槽 Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里，所以，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。
{{ childData.Name }}
这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 childData重命名为 person：
{{ person.Name }}
你甚至可以定义默认内容，用于插槽 prop 是 undefined 的情形：
{{ childData.Name }}
3、v-slot、slot、slot-scope
slot、slot-scope已经被废弃。推荐使用vue2.6.0中的v-slot。
· slot 的使用(匿名插槽&具名插槽)
子组件
具名插槽的默认内容。
这是个匿名插槽(没有name属性)，这串字符是匿名插槽的默认值。
父组件
我是主体
我是其他内容
运行效果：
父组件
子组件
我是主体
我是其他内容
· v-slot 的使用
v-slot指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 的 API 替代方案。
在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
匿名插槽&具名插槽&作用域插槽看上面的例子
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把 v-slot: 替换为字符 #。
例如 v-slot:header 可以被重写为 #header，和其它指令一样，该缩写只在其有参数的时候才可用。
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之，default不可以省略：
{{ childData.Name }}
· slot-scope的使用
这里是child 组件
//作用域插槽的用法(slot-scope){{ childData.msg }}