v-slot顾名思义，中文意思是插槽。如果你平时常用组件化开发，那相信你对插槽肯定不陌生，它的主要作用就是可以在父组件中将自定义内容插入到子组件中，这句话比较拗口，可以先看个基础的插槽示例。
单个插槽
单个插槽也叫默认插槽，或者匿名插槽。
父组件
<Card>
<p>我是父组件中自定义的内容</p>
</Card>
子组件
<div>
<p>我是标题</p>
<slot></slot>
</div>
当组件渲染的时候，<slot></slot> 将会被替换为父组件中的<p>我是父组件中自定义的内容</p>。插槽内可以包含任何模板代码，非常方便，最后渲染出来的代码：
<div>
<p>我是标题</P>
<p>我是父组件中自定义的内容</p>
</div>
设置插槽默认值
以上例子很简单，不过要注意的是可以给slot设置默认值，父组件没有提供插槽内容的时候显示。
父组件
<Card>
//无内容
</Card>
子组件
<div>
<p>我是标题</p>
<slot>暂无数据</slot>
</div>
具名插槽
具名插槽是当一个组件需要多个插槽的时候。它在实际应用中也非常常见，比如element-ui中的dialog组件，比如下面这个例子：
Dialog组件
<div class="container">
<header>
<slot name="header">
<p>我是默认标题</p>
</slot>
</header>
<div class="main">
<slot></slot>
</div>
<footer>
<slot name="footer">
<p>我是默认底部</p>
</slot>
</footer>
</div>
slot元素有一个属性name，它表示该slot的名字。一个不带name的<slot>出口会带有隐含的名字default。
父组件
<Dialog>
<template v-slot:header>
父组件头部
</template>
<p>父组件内容</p>
<template v-slot:footer>
父组件底部
</template>
</Dialog>
在向具名插槽提供内容的时候，可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称。任何没有被包裹在带有v-slot的 <template>中的内容都会被视为默认插槽的内容。最后的渲染结果如下：
<div class="container">
<header>
父组件头部
</header>
<div class="main">
<p>父组件内容</p>
</div>
<footer>
父组件底部
</footer>
</div>
