作用域插槽——又是一个抽象的名字，那我用简单的语言解释一下
当父组件里写的插槽的内容需要使用子组件里的数据时，这时候就要用作用域插槽这个功能
可能你还是没明白，不过没关系，咱们还是通过写一个小例子来学习

我们现在有一个子组件，叫heroList，顾名思义就是要显示一个英雄列表，
咱们快速的把它写出来，都是以前学过的内容

<template>
  <ul>
    <li v-for="item in list" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['列昂纳多', '拉斐尔', '米开朗基罗', '多纳泰罗'],
    }
  },
}
</script>

<style></style>

然后在App.vue里面使用它

<hero-list></hero-list>

显示结果是

然后需求变复杂了，在使用这个组件时，需要把名字渲染到不同的标签里

    <li v-for="item in list" :key="item">
      <h2>{{item }}</h2>
    </li>

或者

    <li v-for="item in list" :key="item">
      <span>{{item }}</span>
    </li>

这时，我们想到可以把li里面写一个slot，然后里面的标签从父组件使用slot插入进来就可以了

    <li v-for="item in list" :key="item">
      <slot></slot>
    </li>

App.vue里面修改

    <hero-list>
      <h2></h2>
    </hero-list>

发现h2标签倒是有了，但是名字没了

因为根本没有在h2里面放内容啊

然后把item放进去

    <hero-list>
      <h2>{{item}}</h2>
    </hero-list>

发现仍然不行，因为item是heroList组件里面数据，在App.vue不能直接使用，即使是在slot里面
那vue还是提前准备好了这个问题的解决方案了，提供了在父组件中使用子组件数据的语法
先修改heroList子组件

    <li v-for="item in list" :key="item">
      <slot :heroName="item"></slot>
    </li>

给slot标签绑定了一个属性，名字叫做heroName，绑定的值就是item，
heroName这个名字是我们自己起的，你可以起你喜欢的名字，后面用时候对应上就行了，
item就是我们循环出来的英雄的名字了
第二步修改父组件App.vue

    <hero-list>
      <template v-slot="slotProps">
        <h2>{{ slotProps.heroName }}</h2>
      </template>
    </hero-list>

这里复杂一点，咱们一点一点解释
1.更上节课一样，我们的slot内容先用一个template标签包住
2.也是使用v-slot，它等于一个值slotProps，slotProps这个名字你也可以随你喜欢起，它表示一个对象，这个对象里存着子组件要在父组件里使用的数据，
3.slotProps这个对象里存放我们在子组件里定义的heroName这个值，把它绑定到h2中

这样列表就显示出来了

结合插槽名字使用

我们上面没有给子组件的slot起名字，使用时也没有名字

 <template v-slot="slotProps">

其实和

<template v-slot:default="slotProps">

是一样的

如果给slot起一个名，修改heroList

<slot :heroName="item" name="text"></slot>

那么在使用时，必须指定名字，修改App.vue

      <template v-slot:text="slotProps">
        <h2>{{ slotProps.heroName }}</h2>
      </template>

根据我们之前学习的简写，可以写成

      <template #text="slotProps">
        <h2>{{ slotProps.heroName }}</h2>
      </template>

插槽的内容就说这么多了，肯定有初学的小伙伴表示，插槽的语法这么多，记不住啊，
我还是要强调一下写法什么的不要死记，记不住也没关系，知道有这么个功能就行了，
等需要时，再到官网去查就行
还有像作用域插槽，在工作中用的地方并不多，
主要集中在表格、列表使用第三方ui库展示时，比如element-ui，到时候再去看官网例子也不晚