Як додати резервний контент для слотів у Vue?
Fallback content для слотів — це default content, який відображається всередині <slot>, якщо батьківський компонент не передав кастомний контент для цього слоту.
Default Slot with Fallback Content
<!-- ChildComponent.vue -->
<template>
<div class="card">
<slot>
<!-- Цей блок буде відображатися, якщо батьківський компонент не передав контент -->
<p>Текст за замовчуванням для слоту буде тут.</p>
</slot>
</div>
</template><!-- Parent.vue -->
<template>
<!-- без вкладеного контенту -->
<ChildComponent />
</template>Примітка:
Оскільки <ChildComponent> має <p>…</p> всередині <slot>, він відобразиться, коли користувацький контент відсутній.
Named Slot with Fallback Content
<!-- Layout.vue -->
<template>
<header>
<slot name="header">
<!-- резервний для заголовка -->
<h1>Заголовок за замовчуванням</h1>
</slot>
</header>
<main>
<slot>
<!-- резервний для основного контенту -->
<p>Основний контент за замовчуванням</p>
</slot>
</main>
</template><!-- Parent.vue -->
<template>
<Layout>
<!-- передано тільки нижній колонтитул -->
<template #footer>
<p>© 2025</p>
</template>
</Layout>
</template>Примітка:
Якщо ви не вказали <template #header>, ви побачите <h1>Заголовок за замовчуванням</h1> замість заголовка.
Кроки для додавання Fallback Content
1. Вставте контент всередину тегу slot
Всередині <slot> додайте будь-які елементи шаблону — вони стануть резервними.
2. Не оголошуйте порожній слот
Не пишіть <slot></slot> без контенту — в цьому випадку резервного контенту не буде.
3. Використовуйте іменовані слоти за потреби
Для кожного <slot name="..."> ви можете окремо вказати резервний контент всередині тегу.
Примітка:
Резервний контент відображається лише тоді, коли контент для слоту повністю відсутній. Якщо передано порожній HTML (наприклад, <template #default></template>), Vue вважає слот заповненим, і резервний контент не з'явиться.
Для деталей дивіться офіційну документацію Vue: Default content for slots
Content
Default Slot with Fallback ContentNamed Slot with Fallback Content
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.