$bindable
通常、プロパティは上から下へ、つまり親から子へと流れます。これにより、データがアプリ内でどのように流れるかを簡単に理解できます。
Svelteでは、コンポーネントのプロパティをバインドすることができ、これによりデータは下から上へと、つまり子から親へと流れることができます。これは頻繁に行うべきことではありませんが、慎重かつ控えめに使用すればコードを簡略化できます。
また、これにより状態プロキシは子の中でミューテートすることもできます。
ミューテートは通常のプロパティでも可能ですが、強く非推奨されています。Svelteは、コンポーネントが所有していない状態をミューテートしているのを検出した場合、警告します。
プロパティーをバインド可能としてマークアップするには、$bindable ルーンを使用します。
FancyInput
<script>
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>親コンポーネ
この場合、propがまったく渡されなかった場合にフォールバック値を指定できます
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();