插槽是什么？

在vue组件开发中，一个组件通常在很多地方都会使用到，插槽可以在使用子组件时，传入自己的自定义的内容，从而渲染出不同的界面，当然props也可以实现相同的功能。

插槽基础

插槽允许我们这样合成组件：

<navigation-link url="/profile">
    Your Profile 
</navigation-link>
复制代码

然后navigation-link组件中这样写

<a v-bind:href="url" class="nav-link"><slot></slot></a>
复制代码

当组件渲染时，slot标签会被渲染成Your Profile，插槽可以包含任何内容，可以有多个标签，包括html内容。

<navigation-link url="/profile">
    <h1>节点1</h1>
    <h1>节点2</h1>
</navigation-link>
复制代码

插槽作用域

当我们想在一个插槽中使用数据时，作用域是指向父组件的，无法访问当前组件的data或者props

<navigation-link url="/profile">
Clicking here will send you to: {{ url }} 
<!-- 这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
传递给<navigation-link> 的而不是 在 <navigation-link> 组件*内部*定义的。 --> 
</navigation-link>
复制代码

因为url是传给navigation-link组件的props，所以url只能在子组件里面才能访问到。

注：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

设置插槽默认值

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中

<button type="submit"><slot></slot></button>
复制代码

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”,我们可以将它放在 <slot> 标签内：

<button type="submit"><slot>Submit</slot></button>
复制代码

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：

<submit-button></submit-button>
复制代码

默认内容“Submit”将会被渲染

<button type="submit">Submit</button>
复制代码

反之我们提供内容

<submit-button> Save </submit-button>
复制代码

默认slot中的submit就会被替换成Save

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：

<div class="container"> 
    <header> <!-- 我们希望把页头放这里 --> </header> 
    <main> <!-- 我们希望把主要内容放这里 --> </main> 
    <footer> <!-- 我们希望把页脚放这里 --> </footer> 
</div>
复制代码

对于这样的情况，<slot> 元素有一个特殊的属性：name。这个属性可以用来定义额外的插槽，这样一个组件中就可以拥有多个插槽了：

<div class="container"> 
    <header> <slot name="header"></slot> </header> 
    <main> <slot></slot> </main> 
    <footer> <slot name="footer"></slot> </footer> 
</div>
复制代码

一个不带 name 的 <slot> 默认会带有隐含的名字“default”。

在向具体某个插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
    <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>
    
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
    
    <template v-slot:footer>
        <p>Here's some contact info</p>
    </template>
    
</base-layout>
复制代码

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽（也就是main标签里的slot）的内容。

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。

废弃的slot指令写法

目前的v-slot指令只能添加在<template>标签上，如果用废弃的slot指令用法，传入的内容可以是任何的html标签。

<base-layout>
    <div slot=“header”>
        <h1>Here might be a page title</h1>
    </div>
    
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
    
    <section slot=“footer”>
        <p>Here's some contact info</p>
    </section>
    
</base-layout>
复制代码