插槽就是子组件预留给父组件放置内容的空间，如果没有插槽，那么我们在父组件中使用子组件时，往子组件里添加内容是无效的。
父组件：
<template>
<div style="text-align: center">
<todo-item>
<!-- 子组件标签里的内容将不会显示 -->
<span>这里是父组件DOM</span>
</todo-item>
</div>
</template>
那么有什么办法可以让子组件标签像div一样可以在里面放置内容吗？当然是有的，就是 我们要介绍的插槽slot。
slot
如果我们在子组件中添加插槽，那么放入子组件标签中的内容就会被加载到slot中。
子组件：
<template>
<div style="text-align: center" class='child'>
<h3>这是子组件</h3>
<!-- 像这样添加slot标签即可 -->
<slot></slot>
</div>
</template>
这样父组件中添加的内容将会替换掉slot，相当于
子组件：
<div style="text-align: center" class='child'>
<h3>这是子组件</h3>
<!-- slot标签会被替换掉 -->
<span>这里是父组件DOM</span>
</div>
每一个子组件都应该有一个像这样不带名字的插槽，称为单个插槽。
同时我们也可以增加一些带有名字的插槽，控制DOM内容的不同位置，带有name属性的插槽称为具名插槽。
子组件
<template>
<div style="text-align: center" class='child'>
<slot name="top"></slot>
<h3>这是子组件</h3>
<slot></slot>
<hr style="margin-top: 20px">
<slot name="down"></slot>
</div>
</template>
父组件中要添加slot属性：
<template>
<div style="text-align: center">
<todo-item>
<span class="father-dom">这里是父组件DOM</span>
<span slot="down">这是底部</span>
<span slot="top">这是顶部</span>
</todo-item>
</div>
</template>
不管父组件中增加的DOM先后顺序如何，具名插槽总是对应到同名的子组件位置处，剩下的对应到单个插槽处。如果在父组件中给了slot属性，但是子组件中并没有该插槽，那么那个标签将不会显示。
slot-scope
这个属性是给父组件中插入在子组件标签中的DOM使用的，可以获取插槽上的属性值。
父组件
<template>
<div style="text-align: center">
<todo-item :message="message">
<template slot-scope="scope">
<span>{{scope}}</span><br>
<span>{{scope.data}}</span>
</template>
</todo-item>
</div>
</template>
子组件：
<template>
<div style="text-align: center" class='child'>
<h3>这是子组件</h3>
<slot :data="message"></slot>
</div>
</template>
父组件中slot-scope绑定的scope对应的数据就是子组件中slot上的data。
