「这是我参与2022首次更文挑战的第37天，活动详情查看：2022首次更文挑战」。

hello，我是正经程序员，作为一个非正经前端开发，看公司项目时经常看到不明白的就查，vue文档看了一小部分就直接上手项目了。Vue solt是我为数不多认真看完的部分，在刚开始使用vue时，使用Props在组件间传值，随着项目进展，才逐渐了解到插槽。

关于props

props功能是将数据从父级传递给子级，主要是为单向数据流而设计的。Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

Vue.component('mycomponent',{
    template: '<div>这是一个自定义组件,父组件传给我的内容是：{{myMessage}}</div>',
    props: ['myMessage'],
    data () {
        return {
            message: 'hello world'
        }
    }
})

调用该组件

<div id="app">
    <mycomponent my-message="hello"></mycomponent>
</div>

注意：由于HTML特性是不区分大小写的，所以传递属性值时，myMessage应该转换成 kebab-case (短横线隔开式)my-message="hello"。

solt（插槽）

简单来说，solt 类似于 props。但与 props 不同的是，solt不仅可以获取数据，还可以获取其他标记甚至其他组件。

更准确地说，它们的主要区别在于，使用 props，父级只能将数据传递给子级，而无法控制如何呈现。但是通过solt，父级可以准确地确定数据应该如何呈现，甚至可以传递另一个组件。

在调用子组件时，使用两个标签（例如：myComp><div></div></muComp>),并在中间插入其它HTML标签的形式。然后在子组件中，使用<slot></slot>接收，这种就叫做插槽。

插槽内容

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。

它允许像这样合成组件：

<navigation-link url="/profile">
    Your Profile
</navigation-link>

在 的模板中可能会写为：

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

当组件渲染的时候，slot></slot>将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

<navigation-link url="/profile">
    <!-- 添加一个 Font Awesome 图标 -->
    <span class="fa fa-user"></span>
    Your Profile
</navigation-link>

甚至其它的组件：

<navigation-link url="/profile">
    <!-- 添加一个图标的组件 -->
    <font-awesome-icon name="user"></font-awesome-icon>
    Your Profile
</navigation-link>

如果 的 template 中没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

编译作用域

当需要在一个插槽中使用数据时，例如：

<navigation-link url="/profile">
    Logged in as {{ user.name }}
</navigation-link>

该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，而不能访问 的作用域。例如 url 是访问不到的：

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

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

后备内容

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

<button type="submit">
    <slot></slot>
</button>

我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，可以将它放在 标签内：

<button type="submit">
    <slot>Submit</slot>
</button>

在一个父级组件中使用 并且不提供任何插槽内容时：

<submit-button></submit-button>

后备内容“Submit”将会被渲染：

<button type="submit">
    Submit
</button>

但是如果提供内容：

<submit-button>
    Save
</submit-button>

则这个提供的内容将会被渲染从而取代后备内容：

<button type="submit">
    Save
</button>

具名插槽

有时需要多个插槽。例如对于一个带有如下模板的 组件：

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

对于这样的情况， 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

一个不带 name 的 出口会带有隐含的名字“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> 中的内容都会被视为默认插槽的内容。

然而，如果希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：

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

任何一种写法都会渲染出：

<div class="container">
<header>
    <h1>Here might be a page title</h1>
</header>
<main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
</main>
<footer>
    <p>Here's some contact info</p>
</footer>
</div>

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

作用域插槽!

有时让插槽内容能够访问子组件中包含的数据是很有用的。例如，设想一个带有如下模板的 组件：

<span>
    <slot>{{ user.lastName }}</slot>
</span>

可能需要换掉备用内容，用名而非姓来显示。如下：

<current-user>
    {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 组件可以访问到 user，而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 元素的一个 attribute 绑定上去：

<span>
<slot v-bind:user="user">
    {{ user.lastName }}
</slot>
</span>

绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
    <template v-slot:default="slotProps">
        {{ slotProps.user.firstName }}
    </template>
</current-user>

在这个例子中，选择将包含所有插槽 prop 的对象命名为 slotProps，也可以使用任意喜欢的名字。

独占默认插槽的缩写语法

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样就可以把 v-slot 直接用在组件上：

<current-user v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</current-user>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<current-user v-slot="slotProps">
    {{ slotProps.user.firstName }}
</current-user>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
    {{ slotProps.user.firstName }}
    <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
    </template>
</current-user>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

<current-user>
    <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
    </template>
    <template v-slot:other="otherSlotProps">
    ...
    </template>
</current-user>

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：

function (slotProps) {
    // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

<current-user v-slot="{ user }">
    {{ user.firstName }}
</current-user>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>

甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

<current-user v-slot="{ user = { firstName: 'Guest' } }">
    {{ user.firstName }}
</current-user>

动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<base-layout>
    <template v-slot:[dynamicSlotName]>
    ...
    </template>
</base-layout>

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

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

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
    {{ user.firstName }}
</current-user>

如果希望使用缩写的话，必须始终以明确插槽名取而代之：

<current-user #default="{ user }">
    {{ user.firstName }}
</current-user>