What are slots in Vue?
Slots are a mechanism for passing content from parent component to child placeholder inside template. With them you create flexible and reusable components, allowing parent to insert arbitrary content into predefined areas of child component.
Slot Types
- Default slot — basic slot without name.
- Named slots — named slots where each slot place has its own name.
- Scoped slots — slots that pass data from child component back to parent through slot props object.
Default Slot
html
<!-- ChildComponent.vue -->
<template>
<div class="wrapper">
<slot />
</div>
</template>html
<!-- Parent.vue -->
<ChildComponent>
<p>Hello from parent!</p>
</ChildComponent>Named Slots
html
<!-- Layout.vue -->
<template>
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>
</template>html
<!-- Usage -->
<Layout>
<template #header>
<h1>Page Header</h1>
</template>
<p>Main page content</p>
<template #footer>
<p>© 2025</p>
</template>
</Layout>Scoped Slots
html
<!-- List.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item" />
</li>
</ul>
</template>
<script>
export default {
props: {
items: Array
}
};
</script>html
<!-- Parent.vue -->
<List :items="users">
<template #default="{ item }">
<strong>{{ item.name }}</strong> — {{ item.age }} years old
</template>
</List>Don't modify slot props:
slot props object is available only for reading in parent template.
More information in official Vue documentation: Vue Documentation: Slots
Content
Slot TypesDefault SlotNamed SlotsScoped Slots
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.