vue3中如何利用$slots动态渲染插槽

当我们二次封装组件时难免会往原组件的插槽中传递内容,但是又不是每次都会用到原组件的所有插槽 例如,我对vex-modal进行2次封装后,vex-modal本身拥有footer,default,header等插槽,但是实际情况我们又不一定每次都能用到组件提供的所有插槽

//这是我们二次封装的组件内部
<template> 
  <vxe-modal>
    //准备动态渲染插槽的地方
  </vxe-modal>
</template>

//使用二次封装的组件时
<template> 
   <Mycomponent> //上述二次封装的组件
        <template #default>
        <div>我是默认内容ss</div>
      </template>
      <template #footer>
        <div>我是底部内容ddd</div>
      </template>
   </Mycomponent>
</template>

那么有没有一种优雅的code之法让原始组件知道我们想要使用到那些插槽啦?

有请今天的主角登场>>>>>>>$slots

我们先来看看官方对$slots的解释

$slots:一个表示父组件所传入[插槽]的对象。
interface ComponentPublicInstance { $slots: { [name: string]: Slot } 

也就是说$slot是一个对象,*[键名]*>>>插槽名,*[键值]*>>>插槽函数,那么我们可以在子组件中通过$slot获取到父组件传过来所有插槽名.

所以我们子组件中遍历$slot动态渲染插槽就可以了

//这是我们二次封装的组件内部
<template> 
    <vxe-modal>
      <template v-for="(item,keys) in $slots" v-slot:[keys]>
        <slot :name="keys"> </slot>
      </template>
    </vxe-modal>
</template>

需要注意v-slot如果要绑定一个变量作为插槽名时要使用[],比如v-slot:[keys]

PS:除了在template中直接使用$slots拿到所用插槽外,我们也能在script中使用useSlots()来获取所有插槽