Проверка содержимого слота с $$slots
Проверяйте $$slots, чтобы условно отображать обёртку только при использовании слота
«Проверка содержимого слота с $$slots» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем проверять слоты
Иногда нужно отображать обёрточную разметку — например, рамку или заголовок — только если слот содержит содержимое.
Объект слотов
Внутри компонента $$slots — это объект со свойством для каждого заполненного слота.
Истинно, если слот заполнен
Если слот содержит содержимое, его ключ в $$slots имеет истинное значение.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}Не создавайте пустые обёртки
Не отображайте обёрточную разметку, когда слот пуст, чтобы поддерживать чистоту DOM.
Сочетание со значениями по умолчанию
Можно выбрать между резервным содержимым и полным отказом от обёртки.
Реактивное определение
$$slots обновляется реактивно, если заполнение слота меняется между отображениями.
Использование с несколькими слотами
Проверяйте каждый именованный слот независимо.
{#if $$slots.header || $$slots.footer}...Часто используется в карточках
Карточки с необязательным заголовком или нижним колонтитулом часто используют этот шаблон.
Ключ слота по умолчанию
Слот по умолчанию находится по адресу $$slots.default.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
Пользователи TypeScript могут объявить тип $$Slots, чтобы получить автодополнение для $$slots.
Компромиссы
Это добавляет ветвление в разметку, но создаёт более чистый результат. Для дизайн-систем это оправданно.
Быстрая проверка
Что проверяет $$slots.header?
Резюме
Используйте $$slots.name, чтобы определить, заполнил ли родительский компонент слот, и не отображайте обёрточную разметку, если слот не заполнен.
Часто задаваемые вопросы
Урок «Проверка содержимого слота с $$slots» бесплатный?
Да — полный текст урока «Проверка содержимого слота с $$slots» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Проверка содержимого слота с $$slots»?
Проверяйте $$slots, чтобы условно отображать обёртку только при использовании слота Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Проверка содержимого слота с $$slots»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Слоты по умолчанию для проецирования содержимого
- Именованные слоты с slot="name"
- Резервное содержимое слота
- Проверка содержимого слота с $$slots