一、基本使用：
子组件：
在子组件中使用<slot></slot>给值留下位置， 可以得到父组件的值
<template>
<div>
<strong>ERROR:</strong>
<slot></slot>
</div>
</template>
<script>
export default {
name:'soltOne'
}
</script>
<style>
</style>
父组件：
<solt-one>有Bug发生</solt-one>
二、域名插槽的基本使用
子组件：
简单的划分了三个区域，一个头部，内容，尾部
头部和尾部<slot></slot>都给了name 让其获得域名
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name:'soltTwo'
}
</script>
<style>
</style>
父组件：
在此内容下，p标签内只要对应子组件起的name名，就能把值赋值到想要的地方，
没有name名的将会赋值到，子组件中没有name名的位置。
<solt-two>
<p slot=" header">头部信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">尾部信息</p>
</solt-two>
父组件还有一种，可以通过域名来实现插槽，使用v-slot:来获取子组件的域名，从而指定赋值，其中也可以添加多条内容，比上一种方法更完善。
<solt-two>
<template v-slot:header>
<p>头部信息1</p>
<p>头部信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template v-slot:footer>
<p>尾部信息1</p>
<p>尾部信息2</p>
</template>
</solt-two>
注意：
这里的顺序是根据子组件的顺序排列，父组件跟换域名位置，还是按照子组件的域名排序出现
内容会跟着父组件发生改变
<solt-two>
<template v-slot:footer>
<p>头部信息1</p>
<p>头部信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template v-slot:header>
<p>尾部信息1</p>
<p>尾部信息2</p>
</template>
</solt-two>
三 如何通过slot从子组件获取内容
子组件：
这里需要注意的是，要将子组件的值进行v-bind绑定
<template>
<div>
<slot :son="list">
</slot>
</div>
</template>
<script>
export default {
name:'soltThree',
data(){
return{
list:[1,2,3,4,5,6,7,8,9]
}
}
}
</script>
<style>
</style>
父组件：
一下提供了四种，子组件的值可以使用v-for遍历，这里的list1是自己新起的名字，son是子组件绑定的，slot-scope这种方法逐步出现了淘汰， #default这种方法比较推荐，看起来就很简单好记
第一种：
<solt-three>
<template v-slot="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>
第二种：
<solt-three>
<template v-slot:default="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>
第三种：
<solt-three>
<template #default="list1">
<ul>
<li v-for="(item,index) in list1.son" :key="index">{ {item}}</li>
</ul>
</template>
</solt-three>
第四种：
<solt-three>
<template slot-scope="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>