Передача сниппетов как свойств
Принимайте значения сниппетов как свойства, чтобы создавать гибкие API компонентов.
«Передача сниппетов как свойств» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Сниппет как свойство
Сниппеты можно передавать дочерним компонентам, как и любые другие значения.
Определение и передача
Определите сниппет непосредственно в родителе и обратитесь к нему по имени.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />Получение в дочернем компоненте
Объявите сниппет как типизированное свойство.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}Шаблон свойств отрисовки
Этот шаблон обобщает шаблон свойств отрисовки в стиле React. Родители управляют тем, как отрисовываются дочерние элементы.
Настройка
Разные родители могут передавать разные сниппеты, полностью настраивая макет.
Типизированные свойства сниппета
С TypeScript укажите тип параметра сниппета, чтобы дочерние компоненты получали автодополнение.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();Необязательные сниппеты
Свойства-сниппеты могут быть необязательными; отрисовывайте их только при наличии.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}Сниппет дочернего содержимого
Сниппет по умолчанию доступен как children в $props().
let { children } = $props();
{@render children()}Возможности композиции
Свойства-сниппеты лежат в основе библиотек пользовательского интерфейса без разметки и с поддержкой композиции.
Импорт TypeScript
Импортируйте тип Snippet из svelte для корректной типизации.
import type { Snippet } from "svelte";Сравнение со слотами
Свойства-сниппеты гибче слотов: они принимают параметры и могут отрисовываться условно.
Быстрая проверка
Как получить сниппет в качестве свойства?
Итоги
Передавайте сниппеты как свойства, чтобы инвертировать управление: родители передают логику отрисовки, а дочерние компоненты вызывают её через @render.
Часто задаваемые вопросы
Урок «Передача сниппетов как свойств» бесплатный?
Да — полный текст урока «Передача сниппетов как свойств» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Передача сниппетов как свойств»?
Принимайте значения сниппетов как свойства, чтобы создавать гибкие API компонентов. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Передача сниппетов как свойств»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- $props() для типизированных свойств
- {#snippet} и {@render}
- Передача сниппетов как свойств
- Сниппеты по умолчанию и именованные сниппеты