????????本文的内容全部来自于官方文档，例子是自己写的，可以加深理解，语言通俗易懂，自己忘记的时候也可以来查看。
? ? ? ? 以前看到插槽头都大，心想这tm都是什么玩意儿，什么slot，烦死了。也怪我之前没有认真静下心来学习它，当时学不进去，觉得插槽真的好麻烦，绕来绕去。然而静下心来一学习，发现并不是那么回事。
????????其实插槽的使用非常简单。下面来一一介绍官方文档中的几种情况，已经对应自己举出来的简单例子，和自己的理解，便于之后返回来看。以下的内容都可以对应官方文档来查看。
????????首先声明自己对于插槽的理解：其实就是一种父子组件传值的一种方式。
1.插槽内容
这个是最简单的一种插槽的使用方法。
Parent.vue? ? ?
Child.vue
运行结果:
解读：
????????可以看到，在父组件中引用了Child这个组件，在其中写了一个h3标签，这个h3会完全替换Child组件中的<slot></slot>，但是不会替换child中的h1标签。甚至另一个组件也可以替换这个slot，具体例子就不举了，十分简单，就是在父组件中引入另外一个组件，然后把这个组件放入到Parent中的Child中就可以了，这样，另外引入的那个组件中的全部内容就会替换Child组件中的slot标签。
????????当然，如果Child组件中没有<slot>这个标签的话，那么在Parent中的<Child></Child>中的全部内容都将作废。
2.渲染作用域
????????它的意思是，你在Parent中的<Child></Child>中可以通过 {{}} 引用Parent中data的数据，这很简单，也很明显，具体可以看下面的例子：?
Parent.vue
?
Child.vue
?
运行结果：
解读：
????????可以看到，直接在父组件的<Child></Child>中引用了Parent的msg这个是可行的，可以成功覆盖Child的slot?
3.备用内容
????????这个就更简单了，意思就是让子组件自身去显示一个默认的内容，当需要被覆盖的时候，它的这个默认内容也可以被覆盖。具体看下面的例子:
Parent.vue
Child.vue
运行结果：
解读：
????????可以看到，在Parent中引用的时候,<Child></Child>中没有任何的内容，也就是说，不会有任何东西去覆盖Child中的slot，换句话说，就是Child中slot里的默认内容会被显示。但是，当Parent中的<Child></Child>中写了任何内容，那么那个默认的内容都会被替换，具体如下：?
Parent.vue
运行结果：
?解读：
????????可以看到，原来的Child的默认内容已经被替换而不显示了
4.具名插槽
????????这个也很简单，顾名思义，就是给子组件的slot起了个名字而已，传值给子组件的时候，就能够根据具体的slot的名字来传值了，这样就实现了将特定的值传递给特定名字的slot，具体看下面的例子：
Parent.vue：
Child.vue：
?
运行结果：
?
解读：
????????要将值传递到特殊的位置，就用特殊命名的slot即可，上面的例子应该已经十分具体了，不再过多赘述。
5.作用域插槽
????????意思就是，要想引用在Parent组件中的<Child></Child>中使用Child组件中的data中的值的时候，不能够直接通过{{}}拿到，而是要经过一些处理才可以。具体见下面的例子：
Parent.vue:
?
Child.vue:
??
运行结果:
解读：
????????如果直接在Parent.vue组件中使用{{item}}的话是没有效果的，因为item是子组件Child作用域中的值，父组件不能直接引用。但是可以通过上图的:item=“item”的方式来绑定，与此同时，父组件引用的时候要用: “slot的名字.属性”。
而这个属性可以任意绑定的：
????????不管绑定什么，父组件中都可以直接通过slot的名字点到。即父组件中可以{{haha.index}},{{haha.another-attribute}}来调用子组件中的值 。
多提一嘴，看下图：
????????父组件中调用的时候要以? ? : ? 后面的属性为准，比如看上图，现在父组件中要调用的时候就得: {{haha.item1}}?
还有一种情况：
????????当子组件的slot中绑定的属性是这样带? -? 的时候，在父组件中就不是通过这个带-的来引用，而是双引号中的内容，见下图：?
5.1 独占默认插槽的缩写语法
????????当子组件的slot未提供name的时候，也就是说，子组件并不包含一个具名插槽，那么这个时候，在父组件中指定子组件便有以下两种写法：
第一种：
第二种：(更简单)?
看看官方文档的说法：
解读上图：
????????也就是说，子组件中的slot可能有多个，比如一个没有名字的默认slot，那么上面的第一个template的里面的所有内容将会替换这个子组件的默认slot。相同的道理，第二个template里面的内容将会替换名为other的slot?
5.2 解构插槽Prop
????????意思是可以使用解构的语法来代替v-slot，详见下图：
Parent.vue:
Child.vue:
运行结果:
解读：
????????parent.vue中就相当于:????????
????????此时child.vue中的slot的属性是item而不是item1.由此可见，通过解构的方式，就无须像上面那样去命名，然后点出来了，不仅简洁而且节省时间。
????????同时，结构的时候，还提供重命名的操作，见下图：
?
改成上图后的运行结果：
?改成上图的解读：
????????起另外一个别名，也许比item这样的可读性更高，当然，也可以一开始在child中就起好可读性高的名字
?
?????????甚至，解构的时候也可以定义备用的内容。意思就是，如果原来的slot属性存在且不为undefined，则就用原来的属性的内容，若为undefined，则通过备用内容顶上，见下图：
Parent.vue:
Child.vue（此时item存在）:
运行结果:
上
Child.vue(当此时的item不存在时，即为undefined)
运行结果：?
?
解读：
????????其实很简单，初看这个写法觉得很奇怪，为什么是 item = ‘这个是备用的内容’?，但其实它的意思就是：如果item有，且不为undefined，则就用原来的item，此时’这个是备用的内容’不起作用。但是，当item为undefined，即它可能是一个不存在的属性的时候，’这个是备用内容’就会补上空缺?
6.动态插槽名
Parent.vue:
Child.vue:
运行结果:
????????当dynamicSlotName == ‘haha’时
?????????当dynamicSlotName == ‘hwx’时
?
解读:
????????其实很简单，这个动态插槽名的意思就是：子组件中已经有定义好了的，有名字的slot了，在父组件中，只需动态更改这个插槽的名字就可以实现覆盖不同的slot
? ? ? ? 如果你能看到这里，我表示很感谢，花了挺多时间写的，喜欢的可以点个赞留个评论。文章到这里就结束了，因为之后的内容都很简单，我就不写了，这些内容就是希望可以帮助到小白的同学，大佬不要喷我。谢谢！🌹🌹🌹