持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
vue的插槽我之前虽然在项目中用过，但是由于其语法的多样性，导致我其实一直对它的使用方式似懂非懂，这段时间我就重新好好研究了下它的使用，所以就准备借这篇文章好好聊聊它，需要注意的是，本篇文章是基于vue2来展开的，废话不多说，开搞！
什么是插槽
简单来说，插槽就是用于 分发组件标签内部的内容
对于插槽的支持，vue是比react做的更好的，因为react里只有通过 this.props.children 来访问插槽内容，而无法更精细化地去区分
vue对于插槽的支持可谓是非常强大了，下面就来看看是如何使用的
插槽的使用
在我看来，vue里的插槽大致分为三类
- 默认插槽
- 具名插槽
- 作用域插槽
下面依次讲解下它们
默认插槽
当我们只是简单地将插槽内容嵌入标签时，里面的所有内容就归 默认插槽 管理，比如说下面的 Your Profile 文本，当然插槽内容可以是任何形式
parent:
<navigation-link>
Your Profile
</navigation-link>
child：
<a
class="nav-link"
>
<slot></slot>
</a>
具名插槽
默认插槽其实感觉就跟react的 this.props.children 类似，对插槽内容进行统一处理，没有做精细化区分
因此就诞生了具名插槽，它可以让我们手动地去控制不同插槽内容的去处，从而能精细化处理，它主要借助如下两点实现的：
- 在一个
<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称 <slot>元素有一个特殊的 attribute：name，这个 attribute 可以用来定义额外的插槽
具体使用如下
parent:
<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>
child:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
作用域插槽
默认情况下，插槽内部访问的值是 父组件的，如果我们想让插槽访问 子组件 的值，那么就需要用上 作用域插槽，使用它需要两个步骤
- 给 slot 标签传递 props
- 通过 v-slot命令的值 来获取传递的props
具体用法如下
parent:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
child:
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
结语
vue提供的插槽功能比react强大太多了，但需要我们记忆的东西也就更多了，所以不断学习的自驱力对于我们非常重要，一起加油吧！
