Свойства: $props

Свойства (props) — данные, которые родительский компонент передаёт дочернему, как атрибуты HTML-тегу. Благодаря им один компонент TodoItem может показать любую задачу: текст и статус приходят снаружи. Внутри компонента свойства принимают руной $props.

Принять свойства

Откройте src/lib/components/TodoItem.svelte из урока о компонентах и замените содержимое:

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let { text, done } = $props();
</script>
 
<li>{done ? '✓' : '○'} {text}</li>

$props() возвращает объект со всеми переданными свойствами, а деструктуризация сразу раскладывает его по переменным text и done.

Передать свойства

Родитель передаёт значения атрибутами:

<!-- src/routes/+page.svelte -->
<script>
  import TodoItem from '$lib/components/TodoItem.svelte';
</script>
 
<ul>
  <TodoItem text="Купить хлеб" done={true} />
  <TodoItem text="Позвонить Олегу" done={false} />
</ul>

На странице два пункта: «✓ Купить хлеб» и «○ Позвонить Олегу». Строку можно передать в кавычках, любое другое значение — в фигурных скобках.

Свойства из списка

Обычно компонент выводят в блоке {#each} и передают поля объекта:

<!-- src/routes/+page.svelte -->
<script>
  import TodoItem from '$lib/components/TodoItem.svelte';
 
  let todos = $state([
    { id: 1, text: 'Купить хлеб', done: true },
    { id: 2, text: 'Позвонить Олегу', done: false }
  ]);
</script>
 
<ul>
  {#each todos as todo (todo.id)}
    <TodoItem text={todo.text} done={todo.done} />
  {/each}
</ul>

Если в родителе изменить todo.done, дочерний компонент сразу покажет новую отметку: свойства реактивны. Короче то же самое можно записать с разворотом объекта: <TodoItem {...todo} />.

Значения по умолчанию

Для необязательного свойства задайте значение по умолчанию прямо в деструктуризации:

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let { text, done = false } = $props();
</script>
 
<li>{done ? '✓' : '○'} {text}</li>

Теперь <TodoItem text="Купить хлеб" /> без done покажет пустой кружок.

Остальные свойства

Свойства, которые компонент не разбирает по имени, можно собрать в объект и передать дальше на элемент:

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let { text, done = false, ...rest } = $props();
</script>
 
<li {...rest}>{done ? '✓' : '○'} {text}</li>

Запись <TodoItem text="Купить хлеб" title="Подсказка" /> добавит атрибут title к элементу li.

Частая ошибка

Менять свойство внутри дочернего компонента, например done = !done по клику. Изменение останется только внутри этого компонента, родитель о нём не узнает, и данные разойдутся. Данные меняет их владелец — родитель. Как сообщить ему о событии, разобрано в следующем уроке.