$bindable

Обычно пропсы движутся в одном направлении — от родителя к потомку. Это упрощает понимание того, как данные перемещаются в вашем приложении.

В Svelte пропсы компонента можно привязывать (bind), что позволяет данным течь вверх — от дочернего компонента к родительскому. Делать это часто не рекомендуется — чрезмерное использование делает поток данных непредсказуемым и усложняет поддержку компонентов — но при редком и аккуратном применении это может существенно упростить код.

Это также означает, что прокси состояния может быть изменён в дочернем компоненте.

Заметка

Изменение также возможно с обычными пропсами, но настоятельно не рекомендуется — Svelte предупредит вас, если обнаружит, что компонент изменяет состояние, которое ему не «принадлежит».

Чтобы пометить проп как привязываемый, мы используем руну $bindable:

JS

FancyInput.svelte

<script>
  let { value = $bindable(), ...props } = $props();
</script>

<input bind:value={value} {...props} />

<style>
  input {
    font-family: 'Comic Sans MS';
    color: deeppink;
  }
</style>

TS

FancyInput.svelte

<script lang="ts">
  let { value = $bindable(), ...props } = $props();
</script>

<input bind:value={value} {...props} />

<style>
  input {
    font-family: 'Comic Sans MS';
    color: deeppink;
  }
</style>

Теперь компонент, который использует <FancyInput>, может добавить директиву bind: (демонстрация):

App.svelte

<script>
  import FancyInput from './FancyInput.svelte';

  let message = $state('hello');
</script>

<FancyInput bind:value={message} />
<p>{message}</p>

Родительский компонент не обязан использовать bind: — он может просто передать обычный проп. Некоторые родительские компоненты не хотят слушать, что их потомки имеют в виду.

В этом случае вы можете указать значение по умолчанию для случая, когда проп вообще не передан:

FancyInput.svelte

let { value = $bindable('fallback'), ...props } = $props();