持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

前言

之前我们说过，当在父组件中，向子组件中传入模板片段的时候，也就是在插槽编写代码时。我们在插槽内是只能访问父组件作用域内的数据，而无法访问子组件内部的数据。 而在某些特殊的业务场景下，我们想同时可以访问父组件和子组件内部的数据。而要实现这种效果，我们要怎么做呢？这就要用到我们今天所说的作用域插槽了。下面就让我们来一探究竟。

作用域插槽

上面我们已经说了，插槽内的代码可以访问父组件内部的数据。所以我们要做的就是，在子组件中，把我们想要使用的数据传递到插槽中。而我们就可以像在组件上传递props那样，在 slot 标签上进行传递：

<!-- <Title> 组件的模板内部代码 -->
<div>
  <slot title="我是标题" :count="1"></slot>
</div>

而我们想要接受这个插槽的内容时，我们需要在使用的子组件的标签上通过v-slot指令，来接受子组件中在slot标签上使用类似 props的形式传递来的数据：

<Title v-slot="slotProps">
  {{ slotProps.title }}
</Title>

当然，你也可以使用解构的形式：

<Title v-slot="{ title }">
  {{ title }}
</Title>

具名作用域插槽

而使用具名作用域插槽呢，想要接受子组件传递的过来的数据，就要通过v-slot:header="slotProps"这种形式，也可以使用简写形式#header="slotProps"：

<Title>
 <template #header="{ title }"> 
     {{ title }}
 </template>
</Title>

注意: 向具名插槽传入数据时，注意 name 是vue的保留字，并不会进行传递：

<slot name="header" title="我是标题"></slot>

所以像上面这种情况，你得到的数据将是这样 { title: '我是标题' }

还有如果具名插槽和默认插槽混用的话，需要通过显示的 template 标签来接受默认插槽的数据。不然直接在组件标签上使用v-slot指令会编译错误。

<template>
  <Title>
    <!-- 使用显式的默认插槽 -->
    <template #default="{ title }">
      <p>{{ title }}</p>
    </template>

    <template #content>
      <p>我是文章的内容</p>
    </template>
  </Title>
</template>