0Pricing
Sveltejs Academy · Урок

{#snippet} и {@render}

Определяйте повторно используемые фрагменты шаблона с помощью сниппетов и отображайте их в любом месте.

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

Сниппеты

Сниппеты — это повторно используемые фрагменты шаблона в Svelte 5, похожие на функции отрисовки или именованные слоты.

Определение сниппета

Используйте {#snippet name(args)}...{/snippet}.

{#snippet greeting(name)}
  <p>Hello, {name}!</p>
{/snippet}

Отрисовка сниппета

Используйте {@render name(args)}, чтобы вызвать его.

{@render greeting("Ada")}

Параметры сниппета

Сниппеты принимают аргументы, как функции; отрисовка передаёт их сниппету.

Повторное использование

Определите сниппет один раз и отрисовывайте его много раз с разными аргументами.

{@render greeting("Ada")}
{@render greeting("Bea")}

Замена повторяющегося кода

Сниппеты уменьшают дублирование в компонентах с большим количеством разметки.

Определение в компонентах

Сниппеты находятся внутри разметки компонента, а не в JS.

Область видимости

Сниппеты могут обращаться к переменным во внешней области видимости компонента.

Передача как свойства

Сниппеты можно передавать как свойства другим компонентам для гибкой композиции.

Замена слотов

Сниппеты обобщают слоты: они более гибкие, пригодны для композиции и типизированы.

TypeScript

Типы сниппетов выводятся на основе их параметров и возвращаемых типов.

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

Как отрисовать сниппет?

Итоги

Сниппеты — это параметризованные фрагменты шаблона. Определяйте их с помощью {#snippet}, а вызывайте с помощью {@render}.

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

Урок «{#snippet} и {@render}» бесплатный?

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

Чему я научусь в уроке «{#snippet} и {@render}»?

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

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

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

Сколько времени занимает урок «{#snippet} и {@render}»?

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

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

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

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

  1. $props() для типизированных свойств
  2. {#snippet} и {@render}
  3. Передача сниппетов как свойств
  4. Сниппеты по умолчанию и именованные сниппеты
← Назад к Sveltejs Academy