Scoped Slots: Passing Data to Parent
slot :data='value', v-slot='{ data }' on the parent side, render prop pattern.
The Limitation of Plain Slots
Plain slots let a parent pass markup down, but the parent cannot access the child internal data. Scoped slots solve this by letting the child expose data back up to the slot content.
Binding Data on a Slot
The child binds attributes on its <slot> element, called slot props. These are passed to whatever the parent renders.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>All lessons in this course
- Named Slots and Default Slot
- Scoped Slots: Passing Data to Parent
- Dynamic Slot Names
- Slot Fallback Content and Checking Slots