passing vue slot in child component

Question

Is there a possibility to access the Vue slot in a deeper nested child component like this?

<Parent>
    <Child1>
        <Child2>
            Content
        </Child2>
    </Child1>
</Parent>

I want to pass HTML to a deeper child component from the parent component.

Answer 1

using scoped slots we can iterate over the slots and pass them down

notice the child-slot name;

# Parent
<template>
  <Child1>
    <template v-slot:child-slot>
     Content
    </template>
  </Child1>
</template>

# Child 1

<template>
   <Child2>
     <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
       <slot :name="name" v-bind="data"></slot>
     </template>
  </Child2>
</template>

# Child 2

<template>
  <div>
     <slot name="child-slot">Fallback Content</slot>
   </div>
 </template>

Answer 2

VueJS 3 solution

@xyos' answer doesn't work with Vue 3 due to some extensive changes but it put me on the right track... After quite a bit of searching, I discovered a (slightly more cumbersome) solution; replacing the Child1 excerpt above:

<template>
   <Child2>
      <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
         <slot :name="slot"></slot>
      </template>
   </Child2>
</template>

Full credit to this answer.