在子组件中传递 vue 插槽

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>