插槽的使用教程（普通插槽、具名插槽、域名插槽）

**

插槽的存在极大地提高了组件的复用性

**
一、普通插槽
(1)新建一个组件Slots并引入到父组件App中,且效果如下

(2)此时我在Slots组件内加入h2标签的足球，但页面上还是没有效果

（3）但当我们在Slots组件内加入slot标签时，这时的效果如下

此时普通插槽的效果就出来了
二、当我们想在使用同一个组件显示不同内容时，这时我们就需要用到具名插槽

怎样通过左边的代码来实现右边的效果
（1）此时我们通过为子组件的slot标签的属性name赋值对应的名字，
再在父组件使用子组件，且需要展示不同内容的标签添加slot属性，赋值和name对应的名字

此时效果如下

(2)我们还可以对上面代码进行优化

三、域名组件
(1)都知道在使用子组件的父组件中，如果使用插槽的形式调用父组件中的数据，是很容易调用的，看下图
但当我们在上图的APP.vue中的li想显示Slot.vue组件中的数据，这时要怎样实现呢？
(2)下面我们将用域名插槽来实现，如下图

我们先将Slots组件中的数据groups通过:name="groups"的形式绑定在slot标签身上，再在App.vue组件中在需要使用groups数据的最大容器身上，通过
绑定slot-scope="name"的方式来获取groups数据，此时name的内容为图中第三处，进而可以对数组进行遍历
（不能和具名插槽一起使用）

希望您能够三连，支持作者（如有错误，望提出你宝贵的意见）