Svelte符文

$bindable

通常，props (屬性) 是單向的，從父元件傳遞到子元件。這使得理解資料如何在應用程式中流動變得容易。

在 Svelte 中，元件的 props 可以被綁定，這意味著資料也可以從子元件向上流動到父元件。這不是你應該經常做的事情，但如果謹慎且少量地使用，它可以簡化你的程式碼。

這也表示可以在子元件中修改狀態代理 (state proxy)。

使用一般的 props 也可以進行修改，但不建議這樣做 — 如果 Svelte 偵測到元件正在修改它不「擁有」的狀態，它會發出警告。

要將一個 prop 標記為可綁定的，我們使用 $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>

父元件不一定要使用 bind: — 它也可以只傳遞一個普通的 prop。有些父元件不希望聽取它們的子元件說什麼。

在這種情況下，你可以指定當完全沒有傳遞 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();
https://svelte.dev.org.tw/docs/svelte/$bindable
$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();
https://svelte.dev.org.tw/docs/svelte/$props
$props();

在 GitHub 上編輯此頁面

$props $inspect