vue3 插槽继承

插槽继承经常会遇到，尤其是孙子组件需要得到爷组件插槽的场景，一个比较简便的方式如下。

<template v-for="(_, name) in $slots" #[name]="{ data }">
      <slot :name="name" :data="data"></slot>
</template>

主要两个关键点，一个是插槽名称，一个是插槽数据。

$slots获取所有的插槽，遍历可得到插槽的名称

#[name]实际上是动态插槽的写法，得到所有插槽的名称

data 这个值根据插槽真实定义的值来写