一、匿名插槽
（写在前面：注册【Son】子组件并在父组件中使用）
父组件中定义【匿名插槽】的样式：
<div class="big">
<Son> // 子组件
<ul class="small"> // 样式在父组件中定义
<li>匿名插槽：</li>
<li>1</li>
<li>2</li>
</ul>
</Son>
</div>
Son子组件中控制【匿名插槽】显示的位置：
<div class="son">
这里是一号组件
<slot></slot> // 父组件中定义的插槽，显示的位置
</div>
效果：
匿名插槽
二、具名插槽
（就是为【匿名插槽】取个名字，更精确地控制插槽。我可在父组件的子组件中写若干插槽，具体用哪个，位置放在何处由子组件决定）
父组件中若干【具名插槽】： （注意两个【具名插槽】的先后顺序）
<div class="big">
<Son>
<ul class="small" slot="s1"> // 定义一号具名插槽
<li>具名插槽一号：</li>
<li>111</li>
</ul>
<ul class="small" slot="s2"> // 定义二号具名插槽
<li>具名插槽二号：</li>
<li>222</li>
</ul>
</Son>
</div>
子组件中控制两个【具名插槽】的位置
<div class="son">
这里是一号组件
<slot name="s2"></slot> // 将二号具名插槽摆在了前面
<slot name="s1"></slot> // 将一号具名插槽摆在了后面
</div>
效果：
具名插槽
现在我们所能做的只是数据及样式由父组件定义，子组件只是能控制插槽显示的位置而已。能不能再自由一点，数据跟位置由子组件控制，父组件单单统一定义样式呢？
于是就有了【作用域插槽】，比较唬人，其实就是【带数据的插槽】。
三、作用域插槽：
子组件在data中定义数据：
data() {
return {
list:["阿星1","阿星2","阿星3","阿星4",],
};
},
子组件中的HTML：
<div class="son">
这里是一号组件
<slot :list="list"></slot>
</div>
父组件中在页面接一下：
<div class="big">
<Son>
<template class="small" slot-scope="aaa"> // aaa 是代号，只在这里与下面用一下
<li v-for="(item,index) in aaa.list" :key="index"> // 又承接上面的 aaa ， 此时的 list 是从子组件中传来的数据
{{item}}
</li>
</template>
</Son>
</div>
效果：
作用域插槽
