SvelteKit 1.0中提取输入到组件后绑定失效问题

问题现象 #

在SvelteKit 1.0中，直接将变量绑定到input元素时响应式与绑定功能完全正常，但将输入逻辑提取为Counter组件后，绑定功能失效。具体表现为：主组件里绿色背景的内联输入能正常更新attributes数据，而Counter组件渲染的输入无法同步更新外部数据。

相关代码 #

data.js #

export let config = {
  attributes: {
    min: 4,
    max: 10,
  },
}

export let attributes = {
  physical: {
    label: 'Físico',
    value: config.attributes.min,
  },
  dexterity: {
    label: 'Destreza',
    value: config.attributes.min,
  },
  intelligence: {
    label: 'Inteligencia',
    value: config.attributes.min,
  },
  perception: {
    label: 'Percepción',
    value: config.attributes.min,
  },
}

Counter.svelte #

<script>
  export let value = 0
  export let min = 0
  export let max = 0
  export let placeholder = ''
  export let name = ''
  export let label = ''

  function increment() {
    if (value < max) {
      value += 1
    }
  }

  function decrement() {
    if (value > min) {
      value -= 1
    }
  }
$: console.log(value)
</script>

<label class="field" for={name}>
  <span>{label}</span>
  <div>
    <input {name} {placeholder} type="number" {min} {max} bind:value />
    <button on:click={decrement}>-</button>
    <button on:click={increment}>+</button>
  </div>
</label>

主组件代码 #

<script>
    import { attributes , config } from './data.js'
    import Counter from './Counter.svelte'
</script>

<section id="attributes">
  {#each Object.entries(attributes) as [key, { label, value }], index}
    <Counter
    {label}
    name={key}
    placeholder={label}
    min={config.attributes.min}
    max={config.attributes.max}
    bind:value
    />
<!-- 以下是和Counter逻辑一致的内联输入代码 -->
      <label class="field" for={name} >
    <span>{label}</span>
    <div>
      <input
        {label}
        name={key}
        placeholder={label}
        min={config.attributes.min}
        max={config.attributes.max}
        bind:value
      />
      <button on:click={() => {value -= 1}}>-</button>
      <button on:click={() => {value += 1}}>+</button>
    </div>
      </label>
<!-- 以上是内联输入代码 -->
  {/each}
</section>
{#each Object.entries(attributes) as [key, { label, value }]}
  <p>{label}: {value}</p>
{/each}

<style>
    .field {
        background: MediumSeaGreen;
    }
</style>

问题原因 #

核心问题是值类型的传递特性：
在{#each}循环里解构{ label, value }时，value是原始数值类型（number），传递给Counter组件的是这个值的副本，而非原对象attributes[key].value的引用。组件内部修改的只是副本，不会同步回原对象。

而主组件内联代码之所以能工作，是因为Svelte会自动解析出bind:value对应的原对象属性路径（attributes[key].value），直接修改原对象的属性，而非副本。

解决方案 #

方案1：传递整个属性对象（推荐） #

让Counter组件接收整个属性对象，绑定对象的value字段，利用引用类型的特性同步修改：

修改后的Counter.svelte

<script>
  export let attr = { value: 0 }
  export let min = 0
  export let max = 0
  export let placeholder = ''
  export let name = ''
  export let label = ''

  function increment() {
    if (attr.value < max) {
      attr.value += 1
    }
  }

  function decrement() {
    if (attr.value > min) {
      attr.value -= 1
    }
  }
$: console.log(attr.value)
</script>

<label class="field" for={name}>
  <span>{label}</span>
  <div>
    <input {name} {placeholder} type="number" {min} {max} bind:value={attr.value} />
    <button on:click={decrement}>-</button>
    <button on:click={increment}>+</button>
  </div>
</label>

主组件调用修改

{#each Object.entries(attributes) as [key, attr], index}
  <Counter
    label={attr.label}
    name={key}
    placeholder={attr.label}
    min={config.attributes.min}
    max={config.attributes.max}
    {attr}
  />
<!-- 内联代码保持不变 -->
{/each}

方案2：通过事件传递更新 #

Counter组件在值变化时触发事件，父组件接收事件后更新原对象：

修改后的Counter.svelte

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

  export let value = 0
  export let min = 0
  export let max = 0
  export let placeholder = ''
  export let name = ''
  export let label = ''

  function increment() {
    if (value < max) {
      value += 1
      dispatch('change', value)
    }
  }

  function decrement() {
    if (value > min) {
      value -= 1
      dispatch('change', value)
    }
  }

  function handleInput(e) {
    value = parseInt(e.target.value)
    dispatch('change', value)
  }
</script>

<label class="field" for={name}>
  <span>{label}</span>
  <div>
    <input 
      {name} 
      {placeholder} 
      type="number" 
      {min} 
      {max} 
      {value}
      on:input={handleInput}
    />
    <button on:click={decrement}>-</button>
    <button on:click={increment}>+</button>
  </div>
</label>

主组件调用修改

{#each Object.entries(attributes) as [key, { label, value }], index}
  <Counter
    {label}
    name={key}
    placeholder={label}
    min={config.attributes.min}
    max={config.attributes.max}
    {value}
    on:change={(e) => attributes[key].value = e.detail}
  />
<!-- 内联代码保持不变 -->
{/each}

内容的提问来源于stack exchange，提问作者Miguel Romero Moracho