What are slots in Vue and how do named and scoped slots work?
Understand Vue slots, including default, named, and scoped slots, with syntax and examples for flexible, reusable components and content distribution.
Expected Interview Answer
Slots are Vue's content-distribution mechanism: they let a parent pass template markup into a child component, which the child renders wherever it places a <slot> outlet. Named slots let a component expose multiple distinct outlets, and scoped slots let the child expose its internal data back to the parent's slot content.
A default slot fills the single unnamed <slot> outlet. Named slots use <slot name="header"> in the child and <template #header> in the parent so several regions can be filled independently. Scoped slots bind data on the outlet — <slot :item="row"> — which the parent receives via v-slot's slot props, letting the child own the data and loop logic while the parent controls the presentation.
- Enables flexible, reusable component layouts
- Separates a component's structure from its content
- Named slots expose multiple independent injection points
- Scoped slots share child state without breaking encapsulation
- Provides fallback content when a slot is left empty
AI Mentor Explanation
Think of a stadium's giant screen template: it has fixed frames for the scoreboard, the batsman's name, and an advert banner. Named slots are those labelled frames the broadcaster fills separately. A scoped slot is when the screen hands you the live run rate so you can format it yourself, while the stadium still owns the underlying feed.
Step-by-Step Explanation
Step 1
Add a default slot
Place <slot /> in the child where parent-provided content should render; anything inside the child's tag fills it.
Step 2
Provide fallback content
Write <slot>Default text</slot> so the child shows fallback markup when the parent passes nothing.
Step 3
Define named slots
Use <slot name="header" /> and <slot name="footer" /> so the component exposes several independent regions.
Step 4
Fill named slots
In the parent use <template #header>...</template> to target each named outlet by its name.
Step 5
Expose data with scoped slots
Bind props on the outlet: <slot :item="row" />, then read them in the parent via <template #default="{ item }">.
What Interviewer Expects
- Clear definition of slots as content distribution
- Difference between default, named, and scoped slots
- Correct #name and v-slot syntax
- Understanding of slot fallback content
- Why scoped slots expose child data without breaking encapsulation
Common Mistakes
- Confusing named slots with scoped slots
- Forgetting the <template> wrapper when targeting a named slot
- Binding slot props but not destructuring them in the parent
- Assuming slot content is compiled in the child's scope, not the parent's
- Overusing slots where a simple prop would be clearer
Best Answer (HR Friendly)
“Slots let one Vue component leave labelled gaps that another component fills with its own content, like a form with blank fields. Named slots give several separate gaps, and scoped slots also hand back some of the component's own data so the filler can format it.”
Code Example
<template>
<div class="card">
<header><slot name="header">Untitled</slot></header>
<ul>
<li v-for="row in items" :key="row.id">
<slot :item="row" />
</li>
</ul>
</div>
</template>
<script setup>
defineProps(['items'])
</script><template>
<Card :items="users">
<template #header>User List</template>
<template #default="{ item }">
{{ item.name }} — {{ item.email }}
</template>
</Card>
</template>Follow-up Questions
- In which component's scope is slot content compiled?
- How do you provide fallback content for a slot?
- When would you choose a scoped slot over a prop?
- How do dynamic slot names work with v-slot?
- How have slot APIs changed from Vue 2 to Vue 3?
MCQ Practice
1. What is the purpose of a named slot?
Named slots let a component expose several distinct outlets (e.g. header, footer) that the parent can fill independently.
2. What does a scoped slot let the child do?
A scoped slot binds data on the <slot> outlet, which the parent receives as slot props while the child keeps ownership of that data.
3. Which syntax targets a named slot in the parent?
The parent uses <template #x> (shorthand for v-slot:x) to fill the slot the child declared with name="x".
Flash Cards
What is a slot in Vue? — An empty slot outlet that lets a parent inject template content into a child component.
What is a named slot? — A slot with a name attribute so a component can expose multiple independent content regions.
What is a scoped slot? — A slot that binds child data as slot props, letting the parent render that data its own way.
How is slot fallback defined? — By placing default markup between the <slot> tags; it renders when the parent supplies nothing.
Continue Learning
Related Interview Questions
What are Vue lifecycle hooks and in what order do they run?
medium
What is the Vue instance and how does the application lifecycle work?
medium
What are Vue components and how do you register them globally vs locally?
easy
What is the difference between the Options API and the Composition API in Vue?
medium