$bindable

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

В Svelte пропсы компонентов могут быть привязаны, что означает, что данные также могут течь вверх от потомка к родителю. Это не то, что вы должны делать часто, но это может упростить ваш код, если использовать с осторожностью и в ограниченных количествах.

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

Заметка

Изменение также возможно с обычными пропсами, но настоятельно не рекомендуется — 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();