What is a default slot?
A default slot is a component's main slot, used when the slot has no name. This is the simplest and most commonly used type of slot in Vue.
In simpler terms:
A default slot is a place inside a child component where the parent can insert its main content.
What does a default slot look like?
Child component:
vue
<template>
<div class="card">
<slot></slot> <!-- default slot -->
</div>
</template>Parent:
vue
<Card>
<p>Text that will go into the default slot</p>
</Card>Result:
html
<div class="card">
<p>Text that will go into the default slot</p>
</div>What is a default slot for?
- inserting the main content into a component
- making components flexible
- letting the parent control the content
- minimizing the number of props by passing HTML directly
Example: a default slot for a modal
Modal.vue:
vue
<template>
<div class="modal">
<slot></slot>
</div>
</template>Usage:
vue
<Modal>
<h1>Title</h1>
<p>Modal description</p>
<button>Close</button>
</Modal>Features of the default slot
It cannot be given a name
It is always:
html
<slot></slot>or shorter:
html
<slot />It can be used together with named slots
Example:
vue
<slot name="header"></slot>
<slot></slot> <!-- default -->
<slot name="footer"></slot>Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.