Beginner LevelVue JS
How do scoped slots pass child component data back up to the parent template?
❓ Interview Prompt: Explain scoped slots, passing child data attributes to slot tags, and consuming slot props in parent templates.
Standard slots render parent markup using parent data scope. Scoped Slots allow a child component to pass internal child data back up to the parent template that is being injected into the slot!
How it Works:
1
Child Component: Binds data attributes to the '<slot>' tag: '<slot :item="todo" :index="idx" />'.
2
Parent Component: Receives slot props via 'v-slot="slotProps"' (or shorthand '#default="{ item }"') to customize list row rendering!
Code Implementation Example
html
<!-- CustomList.vue (Child Component) -->
<script setup>
defineProps({ items: Array });
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item" /> <!-- Expose item to parent -->
</li>
</ul>
</template>
<!-- Parent Component Usage -->
<template>
<CustomList :items="userList">
<!-- Destructure item data passed up from child slot! -->
<template #default="{ item }">
<span class="user-badge">{{ item.name }} ({{ item.role }})</span>
</template>
</CustomList>
</template>💡Scoped slots passing child item data back up to parent template.
🎯 Interview Key Takeaway
Scoped slots allow child components to expose internal data to parent templates for custom slot rendering.
#Scoped Slots#Slots#Beginner
Back to all Vue JS Questions→