SvelteKit中组件双向绑定变量传递失效问题求助

你的代码存在两个核心问题，导致值无法正确绑定更新：

问题点说明 #

• 子组件绑定变量错误：子组件的输入框绑定了hundreds，但这个变量仅在父组件中定义，子组件未声明，属于无效引用。
• 父组件未使用双向绑定语法：父组件传递boundValue={hundreds}只是单向传递初始值，子组件对值的修改无法同步回父组件的变量。

修正后的代码 #

父组件 #

<script>
    import Input from '$lib/components/Input.svelte';

    let hundreds = '';
    let fifties = '';
</script>

<Input inputId="bills-100" bind:boundValue={hundreds} label="$100" />
<Input inputId="bills-50" bind:boundValue={fifties} label="$50" />

<h1>Total:</h1>
{fifties * 50 + hundreds * 100}

输入组件 #

<script>
    export let inputId;
    export let bindValue;
    export let label;
</script>

<label for={inputId}>{label}</label>
<input
  bind:value={bindValue}
  type="text"
  id={inputId}
/>

修正逻辑 #

1. 父组件通过bind:boundValue={变量名}的语法开启双向绑定，让子组件对boundValue的修改能同步回父组件。
2. 子组件将输入框的value绑定到自己导出的bindValue属性，确保数据能在父子组件间双向流通。

内容的提问来源于stack exchange，提问作者Newbie