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.
CodePudding user response:
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>