如何绑定使用 Svelte let 指令声明的变量？

Question

我正在尝试解决“无法绑定到使用 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>

可用作Svelte REPL

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

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>

可用作Svelte REPL

这将最初正确呈现，但会在输入值更改时发出“ReferenceError: index is not defined”错误。

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>

可用作Svelte REPL。

这有效，但要冗长得多。

Answer 1

这是您第一次尝试解决方案无效的错误 - 我提出了一个问题。另一种可能的解决方法是将更新逻辑放在父组件中，这样子组件就不需要对父组件的要求有任何特殊的认识：https : //svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1 . 它与您的第二个解决方案大致相同，详细程度。