1、具名插槽

        顾名思义：具名插槽就是有具体名字的插槽，使用时可以指定替换模板中哪个插槽的内容。当我们需要在子组件模板中不同的位置插入不同的内容时，只会有一个插槽起作用。

代码

执行结果

        通过看结果，很显然，这并不是我们预期达到的效果，我们想要分三块不同展示，结果却是展示了三大块区域出来，这就表明这样使用插槽是存在问题的。

1.1  具名插槽和默认插槽

        <slot>元素可以用一个特殊的属性name来进一步去配置怎么样去分发内容，多个插槽会有不同的名字，具名插槽将匹配内容片段中会有对应的slot的元素，而没有使用name属性的slot插槽就叫做匿名插槽，也被称为默认插槽，在子组件中仍然可以有一个匿名插槽，这样，一些找不到相匹配的片段就同样可以展示出来，但是如果没有匿名插槽，这些找不到相匹配的内容片段就会被丢弃。

代码

执行结果

        这样，给每个内容片段放进对应的插槽区域中去，这样就完美的实现我们想要的效果，同样的，当我们放一个匿名插槽时去处理匹配不到的内容片段，这时会不会也符合我们的预期效果呢？

代码

执行结果

        根据结果，没有匹配的数据也会被匿名插槽所容纳，这样就解决了开发上的很多问题。

2、作用域插槽

        插槽的内容最后是在子组件模板上渲染的，但是假设这时我们需要使用子组件中的数据，这种时候就需要作用域插槽解决问题了。

        作用域插槽是一种特殊类型的插槽，用作一个（能被传递数据的）可重用模板，来代替已经渲染好的元素。利用 slot 标签将子组件的数据传递到分发的内容上，类似于父子组件传值的prop传递数据。

        在父级中，具有特殊属性的 slot-scope 的<template>元素必须存在，表示它是作用域插槽的模板， slot-scope 的值将被用作一个临时变量名，此变量接收子组件传递过来的props对象。

代码

执行结果

        在2.5.0版本以上， slot-scope可以在任意的元素或组件中使用而不再固定死的是在<template>中

代码

        这样简写的结果也是和上面的一模一样的。

3、作用域插槽也可以使用解构的写法实现

代码