vue中的slot——单个插槽和具名插槽

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>中的内容都会被视为默认插槽的内容。
有一点需要注意的是，跟 v-on 和 v-bind 一样，v-slot 也有缩写，这是2.6.0 新增，即把参数之前的所有内容 v-slot 替换为字符 #。例如 v-slot:header 可以被重写为 #header。最后的渲染结果如下：

<div class="container"><header>父组件头部</header><div class="main"><p>父组件内容</p></div><footer>父组件底部</footer>
</div>