Слоты по умолчанию для проецирования содержимого
Размещайте элемент внутри компонента, чтобы принимать произвольное содержимое дочерних элементов
«Слоты по умолчанию для проецирования содержимого» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что такое слоты
Слоты позволяют родительским компонентам вставлять разметку в определённые места дочернего компонента.
Элемент слота
Внутри дочернего компонента разместите тег <slot /> там, где должно появиться содержимое.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Использование из родительского компонента
Поместите дочерние элементы между тегами компонента. Они появятся там, где находится слот.
<Card>
<p>Hello inside the card!</p>
</Card>Возможности композиции
Этот шаблон позволяет создавать повторно используемые каркасы макетов, например карточки, модальные окна и страницы.
Несколько дочерних элементов
Слот по умолчанию может заполняться любым количеством элементов.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Простые строки
В качестве содержимого слота можно также передавать обычный текст.
<Button>Click me</Button>Условное содержимое
Используйте {#if} внутри родительского компонента, чтобы выбирать передаваемое содержимое.
Слоты компонентов
Содержимое слота может свободно включать другие компоненты.
<Card>
<Avatar />
<Username />
</Card>Стилизация
Содержимое слота сохраняет стили родительского компонента, в котором оно задано, а не дочернего.
Макет и логика
Слоты — это инструмент для создания макета и композиции, а не механизм передачи данных. Для данных используйте свойства.
Точки вставки слотов
В компоненте может быть несколько позиций для слотов: слот по умолчанию и именованные слоты.
Быстрая проверка
Где появляется содержимое слота?
Резюме
Используйте <slot /> в дочернем компоненте и передавайте дочерние элементы между тегами родительского компонента.
Часто задаваемые вопросы
Урок «Слоты по умолчанию для проецирования содержимого» бесплатный?
Да — полный текст урока «Слоты по умолчанию для проецирования содержимого» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Слоты по умолчанию для проецирования содержимого»?
Размещайте элемент внутри компонента, чтобы принимать произвольное содержимое дочерних элементов Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Слоты по умолчанию для проецирования содержимого»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Слоты по умолчанию для проецирования содержимого
- Именованные слоты с slot="name"
- Резервное содержимое слота
- Проверка содержимого слота с $$slots