前言

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

作用域插槽

上面我们已经说了，插槽内的代码可以访问父组件内部的数据。所以我们要做的就是，在子组件中，把我们想要使用的数据传递到插槽中。而我们就可以像在组件上传递 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>