Передача props и реактивность данных

В SvelteKit компоненты создаются с акцентом на максимально декларативную передачу данных. Основной механизм передачи информации между компонентами — это props. Любой компонент может принимать свойства, определённые через ключевое слово export.




{title}


Счётчик: {count}

Здесь title и count — это props, которые могут быть переданы извне при использовании компонента:

Типы передачи props

  1. Примитивные значения: строки, числа, булевы значения.

    • Передаются напрямую.
    • Любое изменение внутри родителя мгновенно обновляет значение в дочернем компоненте.

  2. Объекты и массивы:

    • Передаются по ссылке.
    • Изменение внутреннего состояния объекта/массива в родительском компоненте отражается в дочернем.
    • Для детектирования изменений рекомендуется использовать реактивные операторы ($:) или методы update для массивов.



Количество элементов: {itemCount}

Реактивные переменные и $: оператор

SvelteKit использует реактивность на уровне переменных. Любая переменная, обозначенная с $:, автоматически пересчитывается при изменении зависимых значений.




Итоговая сумма: {total}

Особенности реактивности:

  • $: создаёт реактивные декларации, которые отслеживают изменения всех используемых в них переменных.
  • Можно использовать реактивные блоки для сложных вычислений и побочных эффектов:

Деструктуризация и реактивность props

Props можно деструктурировать прямо в компоненте для удобства:




Имя: {name}


Email: {email}

Важно помнить, что реактивность деструктурированных переменных не работает автоматически, если изменяется весь объект user. Для корректного обновления нужно присваивать объект заново:

user = { ...user, name: "Пётр" };

Двусторонняя связь (two-way binding)

Некоторые UI библиотеки на основе SvelteKit используют bind для связывания данных между родителем и дочерним компонентом. Это позволяет обновлять значения напрямую.






Вы ввели: {username}

Особенности bind:

  • Данные синхронизируются автоматически.
  • Может быть использован для стандартных HTML-элементов (input, textarea, select) и пользовательских компонентов.

Передача функций через props

В SvelteKit можно передавать не только данные, но и функции, что позволяет вызывать методы родителя из дочернего компонента:

В родительском компоненте:

 console.log(message)} />

Сравнение реактивности примитивов и объектов

Тип данных Реактивность при изменении Особенности
Примитивы Автоматическая Простое пересчитывание
Объекты/Массивы Зависит от присваивания Для реакции на изменения внутреннего состояния нужно присваивать новый объект или использовать реактивные блоки

Передача props в UI библиотеках на основе SvelteKit

Популярные UI библиотеки (например, Svelte Material UI, Carbon Components Svelte) строят компоненты так, чтобы props напрямую определяли поведение и внешний вид:

  • color, size, variant — типичные свойства для визуальных компонентов.
  • on:click, on:change — реакция на события.
  • bind:value — связывание с состоянием родителя.

Принцип единый: props — это контракт между компонентами, а реактивность обеспечивает мгновенную синхронизацию данных.

Оглавление