vue.jsvuejs2vuejs-slots

passing vue slot in child component


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.


Solution

  • 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>