Hack Frontend Community

Как добавить резервный контент для слотов во Vue?

Резервный контент (англ. fallback content) для слотов — это контент по умолчанию, который показывается внутри <slot>, если родитель не передал пользовательский контент для этого слота.

Default slot с резервным содержимым

<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <slot>
      <!-- Этот блок отобразится, если в Parent не передали содержимое -->
      <p>Здесь будет текст по умолчанию для слота.</p>
    </slot>
  </div>
</template>

<!-- Parent.vue -->
<template>
  <!-- без вложенного контента -->
  <ChildComponent />
</template>

Note:

Поскольку в <ChildComponent> внутри <slot> есть <p>…</p>, оно и отобразится при отсутствии пользовательского контента.

Named slot с резервным содержимым

<!-- Layout.vue -->
<template>
  <header>
    <slot name="header">
      <!-- fallback для шапки -->
      <h1>Заголовок по умолчанию</h1>
    </slot>
  </header>
  <main>
    <slot>
      <!-- fallback для основного контента -->
      <p>Основной контент по умолчанию</p>
    </slot>
  </main>
</template>

<!-- Parent.vue -->
<template>
  <Layout>
    <!-- передаётся только footer -->
    <template #footer>
      <p>© 2025</p>
    </template>
  </Layout>
</template>

Note:

Если вы не указали <template #header>, то вместо шапки вы увидите <h1>Заголовок по умолчанию</h1>.

Шаги для добавления резервного контента

1

1. Вставьте контент внутрь тега slot

Внутри <slot> добавьте любые шаблонные элементы — они станут fallback.

2

2. Не объявляйте пустой слот

Не нужно писать <slot></slot>, без содержимого — в этом случае резервного контента не будет.

3

3. Используйте именованные слоты по необходимости

Для каждого <slot name="..."> можно отдельно указать fallback внутри тэга.

Note:

Фолбэк-контент отображается только при полной отсутствии содержимого для слота. Если передан пустой HTML (например, <template #default></template>), Vue считает слот заполненным и резервный контент не появится.

Для подробностей смотрите официальную документацию Vue: Default content for slots