[vue3进阶] 6.slot插槽3——作用域插槽

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

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

然后在App.vue里面使用它

显示结果是

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

    

      
{{item }}
    

或者

    

      {{item }}
    

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

App.vue里面修改

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

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

然后把item放进去

    
      
{{item}}
    

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

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

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

这样列表就显示出来了

结合插槽名字使用

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