Сниппеты по умолчанию и именованные сниппеты
Задавайте резервные сниппеты и присваивайте имена нескольким слотам сниппетов в компоненте.
«Сниппеты по умолчанию и именованные сниппеты» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Сниппет по умолчанию
Содержимое, размещённое между тегами компонента, становится сниппетом по умолчанию и доступно через children.
<Card>
<p>Inside the card</p>
</Card>В компоненте
Отрисуйте содержимое по умолчанию с помощью свойства children.
let { children } = $props();
<div class="card">
{@render children()}
</div>Именованные сниппеты
Передавайте несколько сниппетов по имени в качестве свойств.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>Получение именованных сниппетов
Объявите каждый именованный сниппет как свойство.
let { header, body } = $props();
{@render header()}
{@render body()}Резервное содержимое
Задавайте содержимое по умолчанию с помощью обычных условных конструкций.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}Безопасность типов
Явно укажите тип параметра каждого сниппета для поддержки в среде разработки.
Замена именованных слотов
Сниппеты заменяют шаблон именованных слотов из Svelte 4 и предоставляют больше возможностей.
Содержимое по умолчанию
У сниппетов нет встроенного резервного содержимого; используйте для этого {#if}.
Шаблоны композиции
Сочетайте сниппеты по умолчанию и именованные сниппеты для создания компонентов без разметки.
Совет по миграции
При миграции преобразуйте каждый именованный слот в свойство-именованный сниппет.
Вывод типов TS
Svelte 5 автоматически создаёт типы Snippet на основе свойств вашего компонента.
Быстрая проверка
Что заменяет именованные слоты в Svelte 5?
Итоги
Содержимое по умолчанию использует сниппет children; именованные сниппеты являются явными свойствами и отрисовываются с помощью @render.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Сниппеты по умолчанию и именованные сниппеты» бесплатный?
Да — полный текст урока «Сниппеты по умолчанию и именованные сниппеты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сниппеты по умолчанию и именованные сниппеты»?
Задавайте резервные сниппеты и присваивайте имена нескольким слотам сниппетов в компоненте. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сниппеты по умолчанию и именованные сниппеты»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- $props() для типизированных свойств
- {#snippet} и {@render}
- Передача сниппетов как свойств
- Сниппеты по умолчанию и именованные сниппеты