插槽是什么？ 插槽是父组件可以使用的子组件中的占位符。 表示父组件可以在此占位符中输入HTML、组件等模板代码。 输入后，子组件的标签将被替换。 插槽显不显示，怎样显示由父组件控制，插槽在哪里显示由http://www.com /控制
以下代码：
将占位符放置在部件上
在父组件中为此占位符输入内容。
看看的效果：吧。 如果部件中没有槽，在同一父部件中为部件输入内容会发生什么？
子组件代码中没有插槽：
2 .父汇编照常填写内容：
3 .展示效果：
总结：如果子组件不使用槽，则父组件不能在子组件中输入模板或html
使用的插槽最简单的使用，上面已经有例子，所以这里不写。 接下来看看吧。 插槽的其他使用场景。
使用插槽-命名插槽说明：命名插槽实际上是在插槽中结婚名称。 子部件可以位于多个槽中，也可以位于不同的位置，但当父部件填充内容时，可以根据其名称将内容填充到相应的槽中。
以下代码：
子组件的代码。 已设置两个插槽(header和footer )。
父组件填充内容，父组件在v-slot:[name]中分配给相应的插槽
3 .展示效果：
接下来，在将内容嵌入父组件中时，请调换顺序，看看是否支持内容。 不更改子组件代码，交换其嵌入父组件代码的顺序。 如图所示，父组件交换footer和header的填充位置。
显示的效果：
由此可知，即使父组件向槽的填充顺序紊乱，只要名称对应，就能够正确地渲染到对应的槽中。
当父组件填充内容时，可以根据此名称将内容填充到相应的插槽中。 也就是说，slot位于子组件中，v-slot位于父组件中，最后一页显示结果是父组件。 使用插槽-默认插槽说明：默认插槽是未命名插槽、未定义子组件的名称的插槽，父代用未指定插槽的填充符的内容填充默认插槽。
示例代码如下：
1 .子组件代码定义默认槽。
2 .父组件在默认插槽中输入内容：
3 .展示的内容
注意：
1 .如果父填充内容子组件中没有相应的名称插槽，则子组件将填充到默认插槽中。 也就是说，命名插槽在name属性中表示插槽的名称，而不传递到默认插槽
2 .如果子组件没有缺省槽，并且父填充项的内容指定为缺省槽，则该内容将填充到不会子组件的其中一个槽中。
3 .如果子组件有多个默认插槽，并且父组件的所有默认插槽都有指定的填充符，请将不会插入子组件的每个默认插槽。
使用插槽-虽然很难理解范围插槽范围插槽的概念和使用，但我们看了大量资料后总结如下
说明：范围槽实际上是指具有数据的槽，即具有参数的槽，简单来说就是子组件提供给父组件的参数，该参数仅在槽中使用，父组件
使用方法：
1 .子组件具有带数据的插槽，代码如下：
template div class='child' h3其中次组件/H3 slot : data=' data '/slot/div/templateeexportdefault { data 3360 function } ' xiaoba'] } }} 2.父组件通过“slot-scope”接收子组件发送来的槽数据，并根据槽数据填充槽的内容
template div class='father' h3这里是父组件/h3！ -首次使用：在flex中数据： class=' tmpl '-- childtemplateslot-scope=' user ' divclass=' tmpl ' spanv-for=' iteminuser
<template slot-scope="user"> <ul> <li v-for="item in user.data">{{item}}</li> </ul> </template> </child> <!--第三次使用：直接显示数据--> <child> <template slot-scope="user"> {{user.data}} </template> </child> <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽--> <child> 我就是模板 </child> </div></template>3.展现的效果：
作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。
我们再来对比，作用域插槽跟单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件提供的模板一般要既包括样式又包括内容，而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前提下）。
上面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个数组（一堆人名的那个数组）。
4.常用场景（以下为常用的情况之一）
如果子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同的呈现方式，这时就需要用到作用域插槽。
子组件中：
插槽用 <slot> 标签来确定渲染的位置，里面放如果父组件没传内容时的后备内容具名插槽用name属性来表示插槽的名字，不传为默认插槽作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接收的对象上 //Child.vue<template><div><main>//默认插槽<slot>//slot内为后备内容<h3>没传内容</h3></slot></main>//具名插槽<header><slot name="header"><h3>没传header插槽</h3></slot></header>//作用域插槽<footer><slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> </footer></div></template><style scoped>div{border:1px solid #000;}</style> 父组件在使用时： 默认插槽的话直接在子组件的标签内写入内容即可具名插槽是在默认插槽的基础上加上slot属性，值为子组件插槽name属性值作用域插槽则是通过slot-scope获取子组件的信息，在内容中使用。这里可以用解构语法去直接获取想要的属性 // Parent.vue<child> <!-- 默认插槽 --> <div>默认插槽</div> <!-- 具名插槽 --> <div slot="header">具名插槽header</div> <!-- 作用域插槽 --> <div slot="footer" slot-scope="slotProps"> {{slotProps.testProps}} </div></child>渲染结果为
在vue2.6中。上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为【#】
子组件用法保持不变，父组件中 slot属性弃用，具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为#插槽名slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性v-slot属性只能在template上使用，但在只有默认插槽时可以在组件标签上使用 //Parent<template> <child> <!--默认插槽--> <template v-slot> <div>默认插槽</div> </template> <!--具名插槽--> <template #header> <div>具名插槽</div> </template> <!--作用域插槽--> <template #footer="slotProps"> <div> {{slotProps.testProps}} </div> </template> <child></template> 拓展用法： 同样可以通过解构获取v-slot={user},还可以重命名v-slot="{user:newName}"和定义默认值v-slot="{user = '默认值'}"插槽名可以是动态变化的v-slot:[slotName] 注意1.默认插槽名为default,可以省略default直接写v-slot,缩写为#时不能不写参数，写成#default(这点所有指令都一样，v-bind、v-on)
2.多个插槽混用时，v-slot不能省略default
slot本质上是返回VNode的函数，一般情况下，Vue中的组件要渲染到页面上需要经过template>>render function >> NVode >> DOM过程。组件挂载的本质就是执行渲染函数得到VNode，至于data/props/computed这些属性都是给VNode提供数据来源
在2.5之前，如果是普通插槽就直接是VNode的形式了，而如果是作用域插槽，由于子组件需要再父组件访问子组件的数据，所以父组件下是一个未执行的函数(slotScopre) => return h('div',slotScope.msg),接受子组件的slotProps参数，在子组件渲染实例时会调用该函数传入数据。
在2.6之后，两者合并，普通插槽也变成一个函数，只是不接受参数了
因为第二篇文章有些新的可取之处，所以又整合了这篇文章加深理解，原文链接：https://blog.csdn.net/H_c_l/article/details/100151287