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

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：未定义索引”错误。

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。另一个可能的解决方法是将更新逻辑放在父组件中，以便子组件不需要对父级的要求有任何特殊的了解：https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1。这与您的第二种解决方案（就详细程度而言）相同。

Answer 2

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

下面是一个REPL示例，显示了它的工作原理：

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

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

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

2 个答案: