对于Vue中插槽的理解（绝对保证通俗易懂）

本文的内容全部来自于官方文档，例子是自己写的，可以加深理解，语言通俗易懂，自己忘记的时候也可以来查看。

以前看到插槽头都大，心想这tm都是什么玩意儿，什么slot，烦死了。也怪我之前没有认真静下心来学习它，当时学不进去，觉得插槽真的好麻烦，绕来绕去。然而静下心来一学习，发现并不是那么回事。

**其实插槽的使用非常简单。下面来一一介绍官方文档中的几种情况，已经对应自己举出来的简单例子，和自己的理解，便于之后返回来看。**以下的内容都可以对应官方文档来查看。

首先声明自己对于插槽的理解：其实就是一种父子组件传值的一种方式。

1.插槽内容

这个是最简单的一种插槽的使用方法。

Parent.vue

Child.vue

运行结果:

解读：

可以看到，在父组件中引用了Child这个组件，在其中写了一个h3标签，这个h3会完全替换Child组件中的，但是不会替换child中的h1标签。甚至另一个组件也可以替换这个slot，具体例子就不举了，十分简单，就是在父组件中引入另外一个组件，然后把这个组件放入到Parent中的Child中就可以了，这样，另外引入的那个组件中的全部内容就会替换Child组件中的slot标签。

当然，如果Child组件中没有这个标签的话，那么在Parent中的中的全部内容都将作废。

2.渲染作用域

它的意思是，你在Parent中的中可以通过 {{}} 引用Parent中data的数据，这很简单，也很明显，具体可以看下面的例子：

Parent.vue

Child.vue

运行结果：

解读：

可以看到，直接在父组件的中引用了Parent的msg这个是可行的，可以成功覆盖Child的slot

3.备用内容

这个就更简单了，意思就是让子组件自身去显示一个默认的内容，当需要被覆盖的时候，它的这个默认内容也可以被覆盖。具体看下面的例子:

Parent.vue

Child.vue

运行结果：

解读：

可以看到，在Parent中引用的时候,中没有任何的内容，也就是说，不会有任何东西去覆盖Child中的slot，换句话说，就是Child中slot里的默认内容会被显示。但是，当Parent中的中写了任何内容，那么那个默认的内容都会被替换，具体如下：

Parent.vue

运行结果：

解读：

可以看到，原来的Child的默认内容已经被替换而不显示了

4.具名插槽

这个也很简单，顾名思义，就是给子组件的slot起了个名字而已，传值给子组件的时候，就能够根据具体的slot的名字来传值了，这样就实现了将特定的值传递给特定名字的slot，具体看下面的例子：

Parent.vue：

Child.vue：

运行结果：

解读：

要将值传递到特殊的位置，就用特殊命名的slot即可，上面的例子应该已经十分具体了，不再过多赘述。

5.作用域插槽

意思就是，要想引用在Parent组件中的中使用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

如果你能看到这里，我表示很感谢，花了挺多时间写的，喜欢的可以点个赞留个评论。文章到这里就结束了，因为之后的内容都很简单，我就不写了，这些内容就是希望可以帮助到小白的同学，大佬不要喷我。谢谢！???