Составные компоненты с контекстом
Создавайте многосоставные компоненты, которые обмениваются состоянием через контекст.
«Составные компоненты с контекстом» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Составные компоненты
Составной компонент — это один логический элемент интерфейса, разделённый на несколько взаимодействующих подкомпонентов (вкладки + вкладка + панель вкладки).
Общее состояние через контекст
Родитель задаёт общее состояние в контексте, а дочерние компоненты читают его через getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });Дочерний компонент читает контекст
Каждые вкладка и панель вкладки получают общий API.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Слабая связанность
Дочерние компоненты не ссылаются напрямую на родительский компонент, а взаимодействуют через контекст.
Компонуемый API
Пользователи компонентов могут свободно менять порядок и настраивать подкомпоненты.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>Примеры
Вкладки, аккордеон, меню, список выбора, этапы.
Соглашение об именовании
Используйте общий префикс или экспорт пространства имён для ясности.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Типобезопасный контекст
Определите ключ-символ и тип для общего API.
Ошибки при неправильном использовании
Если дочерний компонент не может найти контекст, выдайте понятную ошибку, которая подскажет пользователям компонентов, что делать.
Повторное использование
Составные компоненты легко использовать повторно, поскольку пользователи компонентов управляют их композицией.
Сочетание с построителями
Составные компоненты часто используют шаблон построителя внутри, чтобы обеспечить доступность без заданных стилей.
Быстрая проверка
Как составные компоненты совместно используют состояние?
Повторение
Составные компоненты разделяют интерфейс на компонуемые подкомпоненты, которые взаимодействуют через контекст.
Часто задаваемые вопросы
Урок «Составные компоненты с контекстом» бесплатный?
Да — полный текст урока «Составные компоненты с контекстом» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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 — локальная установка не требуется.
Все уроки этого курса
- Render-свойства со сниппетами
- Компоненты высшего порядка
- Шаблон Builder для headless-интерфейсов
- Составные компоненты с контекстом