通常、props は親から子へ一方向に流れます。これにより、アプリ内のデータの流れを簡単に理解することができます。

Svelte では、コンポーネントの props を _バインド_ することができ、データを子から親へと _逆方向_ に流すこともできます。これは頻繁に行うべきことではありませんが、慎重かつ控えめに使用すればコードを簡素化できます。

また、子コンポーネント内で state proxy を _変異_ (mutate) できることを意味します。

> [!NOTE] 通常の props でも変異(Mutation)は可能ですが、これは強く非推奨です — Svelte は、コンポーネントが「所有していない」state を変更していることを検出すると警告を表示します。

props をバインド可能 (bindable) としてマークするには、`$bindable` rune を使用します:

<!-- prettier-ignore -->
```svelte
/// file: FancyInput.svelte
<script>
	let { value = $bindable(), ...props } = $props();
</script>

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

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

これで、`<FancyInput>` を使用するコンポーネントに [`bind:`](bind) ディレクティブを追加することができます ([デモ](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):

<!-- prettier-ignore -->
```svelte
/// file: App.svelte
<script>
	import FancyInput from './FancyInput.svelte';

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

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

親コンポーネントは必ずしも `bind:` を使用する必要はありません — その場合、通常の props を渡すだけで構いません。子の発言を聞きたくない親もいるかもしれません。

この場合、何も props が渡されないときのフォールバック値を指定することができます:

```js
/// file: FancyInput.svelte
let { value = $bindable('fallback'), ...props } = $props();
```