PricingLoginStart free
Vue Academy · Урок

Резервное содержимое слота и проверка слотов

Содержимое слота по умолчанию, useSlots() для проверки переданного слота, условный вывод

Урок 4 из 413 шагов

«Резервное содержимое слота и проверка слотов» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Резервное содержимое слота

Элемент <slot> может содержать разметку по умолчанию. Если родительский компонент передаёт содержимое для этого слота, используется содержимое родителя; если нет — отображается резервное содержимое внутри слота.

Определение резервного содержимого

Поместите содержимое по умолчанию между тегами слота. Это удобный вариант по умолчанию для необязательных слотов.

<!-- Button.vue -->
<button>
  <slot>Submit</slot>
</button>

Резервное содержимое в действии

Если родительский компонент ничего не передаёт, отображается «Submit». Если родительский компонент передаёт содержимое, оно заменяет резервный вариант.

<Button />            <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->

Резервное содержимое именованных слотов

Именованные слоты тоже поддерживают резервное содержимое. Для слота заголовка можно задать стандартный заголовок, если родительский компонент его не передал.

<header>
  <slot name="header">
    <h2>Default Title</h2>
  </slot>
</header>

Проблема пустых оболочек

Иногда требуется отображать элемент-оболочку (например, контейнер подвала) только тогда, когда родительский компонент действительно передал содержимое слота. Для этого необходимо проверить, существует ли слот.

Составная функция useSlots

В <script setup> вызов useSlots() возвращает объект, ключами которого являются переданные имена слотов. Каждое значение — это функция, возвращающая виртуальные узлы слота.

import { useSlots } from "vue";
const slots = useSlots();

Проверка переданного слота

Вызовите функцию слота и проверьте, содержит ли она истинное значение. slots.header существует только в том случае, если родительский компонент передал этот слот; вызов slots.header?.() безопасно возвращает его виртуальные узлы.

const hasHeader = computed(() => !!slots.header);

Условный вывод оболочки

Используйте эту проверку вместе с v-if, чтобы элемент-оболочка появлялся только при наличии содержимого и в DOM не создавались пустые узлы.

<header v-if="slots.header">
  <slot name="header" />
</header>

Зачем нужна опциональная цепочка

slots.header?.() защищает от ситуации, когда слот не определён. Без опциональной цепочки вызов неопределённого слота приводит к ошибке. Этот приём часто используется в функциях рендеринга и вычисляемых проверках.

const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }

$slots в шаблоне

Шаблоны предоставляют те же данные через $slots. Вы можете напрямую проверить $slots.footer в v-if, не импортируя useSlots.

<footer v-if="$slots.footer">
  <slot name="footer" />
</footer>

Объединение всего

Надёжный компонент карточки отображает каждый раздел только при наличии переданного слота, сохраняя разметку чистой, а стили — предсказуемыми.

<div class="card">
  <header v-if="$slots.header"><slot name="header" /></header>
  <div class="body"><slot /></div>
  <footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>

Быстрая проверка

Как проверить в script setup, передал ли родительский компонент слот «header»?

Ответь в интерактивном уроке

Повторение

Вы узнали, что слоты могут содержать резервное содержимое, отображаемое, когда родительский компонент не передаёт слот. Чтобы условно отображать оболочки, проверяйте наличие слота с помощью useSlots() (slots.header?.()) в script setup или $slots.header в шаблонах.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
42
Уроки
156
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Резервное содержимое слота и проверка слотов» бесплатный?

Да — полный текст урока «Резервное содержимое слота и проверка слотов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Резервное содержимое слота и проверка слотов»?

Содержимое слота по умолчанию, useSlots() для проверки переданного слота, условный вывод Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Резервное содержимое слота и проверка слотов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Именованные слоты и слот по умолчанию
  2. Области слотов: передача данных родителю
  3. Динамические имена слотов
  4. Резервное содержимое слота и проверка слотов
← Назад к Vue Academy