我正在尝试解决“无法绑定到使用 let: 指令声明的变量”错误。

// FancyList.svelte
<script>
    export let items = []   
</script>

<ul>
    {#each items as item, i}
        <li><slot item={item}></slot></li>
    {/each} 
</ul>

// App.svelte
<script>
    import FancyList from './FancyList.svelte'
    let items = [ {x: 'AX', y: 'AY'}, {x: 'BX', y: 'BY'}, {x: 'CX', y: 'CY'}]
</script>

<FancyList bind:items={items} let:item={item}>
    <input type=text bind:value={item.x}>
    <input type=text bind:value={item.y}>
</FancyList>

可用为精简 REPL https://svelte.dev/repl/bc985c21735f4b2a9945f1ddc74988e6?version=3.6.1

到目前为止我尝试过的事情

1) 制作FancyList传递项目索引而不是项目本身和绑定items[index]代替item.

<FancyList items={items} let:index={index}>
    <input type=text bind:value={items[index].x}>
    <input type=text bind:value={items[index].y}>
</FancyList>

可用为精简 REPL https://svelte.dev/repl/0c17578d7d2e45d7b142d89ef1a8db90?version=3.6.1

这最初会正确渲染，但在输入值更改时会发出“ReferenceError：索引未定义”错误。

2) 制作FancyList通过onChange回调并且不使用bind.

<FancyList bind:items={items} let:item={item} let:onChange={onChange}>
    <input type=text value={item.x} on:input={e => onChange({...item, x: e.target.value})}>
    <input type=text value={item.y} on:input={e => onChange({...item, y: e.target.value})}>
</FancyList>

可用为精简 REPL https://svelte.dev/repl/54510cf0c9044c459d1981fd6265d04b?version=3.6.1.

这可行，但明显更加冗长。

这是一个错误，您的第一次解决方案尝试不起作用 - 我已经提出了一个问题 https://github.com/sveltejs/svelte/issues/3140。另一种可能的解决方法是将更新逻辑放在父组件中，以便子组件不需要对父组件的要求有任何特殊的了解：https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1 https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1。从冗长的角度来看，它与您的第二个解决方案大致相同。