作用域插槽——又是一个抽象的名字，那我用简单的语言解释一下
当父组件里写的插槽的内容需要使用子组件里的数据时，这时候就要用作用域插槽这个功能
可能你还是没明白，不过没关系，咱们还是通过写一个小例子来学习
我们现在有一个子组件，叫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，到时候再去看官网例子也不晚
