Beginner LevelVue JS
How do default and named slots enable component content distribution in Vue?
❓ Interview Prompt: Explain Vue slots, content distribution, default fallback content, and named slots (v-slot:name / #name).
Slots ('<slot />') act as placeholders inside child components, allowing parent components to pass template markup into specific layout areas.
1. Default Slot:
Any content placed inside child tags in the parent template is rendered inside the child's default '<slot />' tag.
2. Named Slots ('<slot name="header" />'):
Allows child components to define multiple distinct slot outlets. The parent targets specific slots using the 'v-slot:name' directive (or shorthand '#name').
Code Implementation Example
html
<!-- BaseModal.vue (Child Component) -->
<template>
<div class="modal">
<header><slot name="header">Default Modal Title</slot></header>
<main><slot /></main> <!-- Default slot -->
</div>
</template>
<!-- Parent Component Usage -->
<template>
<BaseModal>
<template #header>
<h1>Custom Warning Title</h1>
</template>
<p>Modal body content injected into default slot.</p>
</BaseModal>
</template>💡Using named slots (#header) and default slots for layout component distribution.
🎯 Interview Key Takeaway
Slots allow parents to inject template markup into child components using default and named (#name) slot outlets.
#Slots#Content Distribution#Beginner
Back to all Vue JS Questions→