Передача свойств от родителя
Передавайте значения свойствам дочернего компонента в шаблоне родителя
«Передача свойств от родителя» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Импорт дочернего компонента
Используйте стандартную конструкцию ES import в начале родительского компонента, чтобы подключить дочерний.
<script>
import Greeting from "./Greeting.svelte";
</script>Использование тега
Отобразите дочерний компонент, написав тег с его именем, начинающимся с прописной буквы.
<Greeting />Передача статических значений
Передавайте строковый литерал с помощью атрибутов в кавычках.
<Greeting name="Ada" />Передача динамических значений
Передавайте выражение JS, заключив значение в фигурные скобки.
<Greeting name={userName} />Сокращённая запись с тем же именем
Если параметр и переменная имеют одно имя, используйте сокращённую запись {name}.
<Greeting {name} />Несколько параметров
Объединяйте статические, динамические параметры и параметры в сокращённой записи в любом порядке.
<Card title="Tasks" {items} count={items.length} />Разворачивание параметров
Разверните объект параметров с помощью синтаксиса {...obj}.
<Card {...cardProps} />Условные параметры
Используйте тернарные выражения, чтобы передавать значения по условию.
<Button label={isLoading ? "Saving..." : "Save"} />Сокращённая запись логического параметра
Передайте логический атрибут без значения, чтобы установить для него true.
<Toggle disabled />Функции в качестве параметров
В качестве параметров можно передавать ссылки на функции для обратных вызовов.
<Modal onClose={() => (open = false)} />Параметры-объекты
Передавайте целые объекты, когда вместе передаются много связанных значений.
<UserCard user={currentUser} />Быстрая проверка
Как передать переменную в качестве параметра?
Итоги
Импортируйте компонент, используйте его тег и передавайте параметры в виде литералов, выражений, сокращённых записей или разворачивания.
Часто задаваемые вопросы
Урок «Передача свойств от родителя» бесплатный?
Да — полный текст урока «Передача свойств от родителя» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Передача свойств от родителя»?
Передавайте значения свойствам дочернего компонента в шаблоне родителя Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Передача свойств от родителя»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Объявление свойств с export let
- Передача свойств от родителя
- Значения свойств по умолчанию
- Передача свойств с $$props и $$restProps