将元素作为承载分发内容的出口。插槽就是在子组件中提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
-
使用场景 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容，如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的
-
插槽分类 1.默认插槽
子组件
<h3>我是子组件:第一种，默认插槽</h3>
<slot></slot> // 这部分的位置放在哪里取决于你想在哪里渲染元素
父组件
<div class="mrcc">
<div>我是父组件</div>
<children>
<div>我是父组件里面的内容: 今日天气多云12</div>
</children>
</div>
2.具名插槽
具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
子组件：
子组件的代码，设置了两个插槽(header和footer)
<div class="header">
<h1>子组件的头部具名插槽</h1>
<slot name="header"></slot>
</div>
<div class="footer">
<h1>子组件的尾部具名插槽</h1>
<slot name="footer"></slot>
</div>
父组件：
<div class="jmcc">
<div>具名插槽:我是父组件</div>
<children>
//v-slot 指令自 Vue 2.6.0 起被引入, v-slot指令可以用#代替 (#header) 或者slot="header"
<template v-slot:header>
<h1>我是父组件里面的头部具体内容</h1>
</template>
<template v-slot:footer>
<h1>我是父组件里面的尾部具体内容</h1>
</template>
</children>
</div>
注意：
父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中,
父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的,
父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。
即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中
3.作用域插槽
作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容 • 使用方法：
- 子组件存放一个带数据的插槽: mylist和title是子组件传给父组件的参数
- 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容
子组件
<h3>作用域插槽：slot组件标题</h3>
<slot :data="list"></slot>
data(){
return{
list:['1','2','3','4']
}
}
父组件
<children>
<template slot-scope="childData">
<div v-for="(item,index) in childData.data" :key=index>
<input type="text" :value="item">
</div>
</template>
</children>
