vue 中的插槽 - 单个插槽和命名插槽

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>