vue3中作用域插槽的使用

vue3的作用域插槽，在我们封装高级组件时，依靠其灵活的slot，可以帮助我们拓展组件的多样性。

首先得搞清楚作用域插槽，简而言之就是：父组件只能访问在父组件中编译的内容，子组件只能访问子组件中的内容；

假设我们有一个需求，在App.vue中有一个数组需要通过一个子组件来显示，同时我们还希望显示内容的标签可以自定义，也就是说可以用div、span或者其他任何html标签，如何实现呢？当然是插槽。

看下面的例子：

假设有两个组件，App.vue和SlotComponent.vue
要实现上面的需求，可以像这样写：

App.vue

<template>
<!--
从下面就可以看出作用域插槽的灵活之处，我既可以用button也可以用h1标签
首先需要在template上使用v-slot指令给插槽传递一个slotProps对象，要访问的子组件的值就在这个对象里
（注意该指令只能用在template标签上）
然后就可以像下面这样，通过slotProps对象访问item和index了


注意：！！ 具名插槽要这样写v-slot：  v-slot:slotName="peanut"
-->

  <!--使用button-->
  <SlotComponent :langs="langs" v-slot="slotProps">
    <button>{
  {slotProps.item}}  序号 {
  {slotProps.index}}