Svelte符文

$bindable

通常，props 单向流动，从父组件到子组件。这使得理解数据在应用程序中的流动变得很容易。

在 Svelte 中，组件 props 可以被 *绑定*，这意味着数据也可以从子组件 *向上* 流向父组件。您不应该经常这样做，但如果谨慎而适量地使用，它可以简化您的代码。

这也意味着状态代理可以在子组件中被 *修改*。

对于普通 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.net.cn/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.net.cn/docs/svelte/$props
$props();

在 GitHub 上编辑此页面

$props $inspect