在学习slot之前，要先知道了解父组件与子组件的相关知识，默认已经知晓。
slot 插槽有三个知识点，匿名插槽，具名插槽，作用域插槽
为了便于理解，在学习初期可以把插槽理解为排版，首先创建一个组件模板：
<template id="test">
????????<div>
????????<slot>我是匿名插槽的默认内容</slot> <!--默认插槽-->
???????? <slot name="class">我是具名插槽的默认内容</slot> <!--具名插槽-->
????????</div>
</template>
然后注册一个组件（我注册的是全局组件）：
Vue.component('child',{ template:"#test" //id为test 的template模板 });//初始化根实例
new Vue({
el:"#app", data:{ }, })
引用组件：
<div id="app">
<child>
<li slot="class">我是具名插槽</li> <!--注意具名和匿名的位置-->
<li>我是匿名插槽</li>
</child>
</div>
仔细看一下，具名插槽和匿名插槽的位置，在引用组件的时候，无论子组件如何书写，只要是有名字的具名插槽，位置始终与模板的插槽位置相一致，当子组件内的内容没有名字时，它会寻找模板内的匿名插槽来存放自己的内容，但是当寻找不到时，子组件里的内容将会被抛弃！！
这个是上面代码的运行结果：
?大家应该也发现了，模板内写的默认内容不见了，的确，当应用组件时，子组件里是拥有内容的即：
<div id="app">
<child>
<li slot="class">我是具名插槽</li>
<li>我是匿名插槽</li>
</child>
</div>
?或者
<div id="app">
<child>
<li slot="class"></li>
<li></li>
</child>
</div>
?子组件里的内容都会把模板内的默认内容给覆盖掉（空的东西也算是一个内容吧）
要想让默认内容显示出来，可以这样写：
<div id="app">
<child>
</child>
</div>
这个默认内容，官方文档里称为：后备内容
接着是插槽的作用域，虽说是作用域，但并不是我们日常理解上的作用范围，我觉得更可以称为数据域
官方上的插槽作用域和一些书本上以及别的博主写的内容，我个人能尝试成功，但是不知道那样写的意义是啥，就感觉把数据绕来绕去的，可能是我的能力不够或者未接触到那个范围，所以没有概念，以下的插槽作用域是我根据我自己的理解书写的，仅供参考。
<body>
<div id="app"> <!--引用组件-->
<child>
<template slot="class" v-for="item in students">
<li> 名字为：{{item.name}} ,年龄是：{{item.age}}</li>
</template>
<template>
<p>我是匿名插槽</p>
</template>
</child>
</div>
<template id="test"> <!--创建组件模板-->
<div>
<slot>我是匿名插槽的默认内容</slot> <!--默认插槽-->
<slot name="class">我是具名插槽的默认内容</slot> <!--具名插槽-->
</div>
</template>
</body>
<script>
????????//注册全局组件
Vue.component('child',{
props:['students'],
template:"#test"
});
????????//初始化vue并绑定
new Vue({
el:"#app",
data:{
name:"",
students:[
{name:'小明',age:17},
{name:'小王',age:16},
{name:'小红',age:18},
{name:'小蓝',age:19},
{name:'小绿',age:17},
{name:'小子',age:15},
]
},
})
</script>
我没有像别的博主那样把数据一直绑定，可能是我的能力不够，不知道那样做的意义是什么，希望有大佬可以指点一二。
以上代码的运行结果为：
最后需要讲的是，style属性在插槽的使用，
<template id="test">
<div>
<slot style="color: red">我是匿名插槽的默认内容</slot> <!--默认插槽-->
<slot name="class">我是具名插槽的默认内容</slot> <!--具名插槽-->
</div>
</template>
在slot内书写 style是无用的，不会被显示出来，同样class也是无用的，但是你可以在slot的上一级的 div 里添加style或者class，若是想要单独修改slot里的style属性，或者添加class，只能在引用子组件的时候添加：
<style> .qwe{ color: red; } </style><div id="app"> <child> <template slot="class" v-for="item in students" > <li class="qwe"> 名字为：{{item.name}} ,年龄是：{{item.age}}</li> </template> <template > <p style="color: blue">我是匿名插槽</p> </template> </child> </div>
以下是运行结果：
