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

Question

我正在尝试解决 "Cannot bind to a variable declared with the let: directive" 错误。

// 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

这是一个错误，您的第一个解决方案尝试没有奏效 — 我 raised an issue. Another possible workaround is to put the update logic in the parent component, so that the child component doesn't need to have any special awareness of the parent's requirements: https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1。它与您的第二个解决方案大致相同，verbosity-wise。

Answer 2

您可以使用 svelte:component 来完成此操作。它基本上可以让您将一个组件传递给您的 FancyList，使其成为某种高阶组件。

这是一个 REPL 示例，显示它正在工作：

https://svelte.dev/repl/bc985c21735f4b2a9945f1ddc74988e6?version=3.6.1

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

How to bind variable declared with Svelte let directive?

svelte

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