vue2插槽的透传

多组件嵌套的情况下，有时候会希望父组件向孙子组件（或者更小的辈分）的slot中插入内容， 显然，这需要在孙子组件里面用<slot :name="field.component" :data="formValue" />, 在父组件里面用<childComponent #slotName="childData"><childComponent/>。但是在子组件中应该如何进行插槽的声明，才能做到类似中继的作用呢。

一般地，我们可以用下面的方式来声明：

  <!--子组件 -->
<grandsonComponent
      v-bind="$props"
      @action-handle="actionHandle"
      @fetched-data="($event) => $emit('fetched-data', $event)"
    >
      <template v-for="slot in Object.entries(this.$slots)" :slot="slot[0]">
        <slot :name="slot[0]"></slot>
      </template>
      <template v-for="(_, name) in $scopedSlots" v-slot:[name]="data">
        <slot :name="name" v-bind="data" />
      </template>
</grandsonComponent>

这样，在父组件中，可以用

  <!--父组件 -->
<childComponent>
      <template #slot-prop="childData">
    .........
      </template>
</childComponent>

在子组件中，可以用

  <!--子组件 -->
。。。。
 <slot :name="slotName" :data="formValue" />
。。。。