$bindable
通常、props は親から子へ一方向に流れます。これにより、アプリ内のデータの流れを簡単に理解することができます。
Svelte では、コンポーネントの props を バインド することができ、データを子から親へと 逆方向 に流すこともできます。これは頻繁に行うべきことではありませんが、慎重かつ控えめに使用すればコードを簡素化できます。
また、子コンポーネント内で state proxy を 変異 (mutate) できることを意味します。
通常の props でも変異(Mutation)は可能ですが、これは強く非推奨です — Svelte は、コンポーネントが「所有していない」state を変更していることを検出すると警告を表示します。
props をバインド可能 (bindable) としてマークするには、$bindable rune を使用します:
FancyInput
<script>
let { value = $bindable(), ...props } = $props();
</script>
<input bind:value={value} {...props} />
<style>
input {
font-family: 'Comic Sans MS';
color: deeppink;
}
</style><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: を使用する必要はありません — その場合、通常の props を渡すだけで構いません。子の発言を聞きたくない親もいるかもしれません。
この場合、何も props が渡されないときのフォールバック値を指定することができます:
FancyInput
let { let value: anyvalue = function $bindable<"fallback">(fallback?: "fallback" | undefined): "fallback"Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
$bindable('fallback'), ...let props: anyprops } = function $props(): anyDeclares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
$props();