是否可以使用 Svelte 跨多个组件绑定相同的变量？

Question

如果同一组件在同一上下文中多次使用，绑定属性是否可以在它们的实例之间共享？

例如，如果我有一个创建复选框的组件，如何为字母选择器和数字选择器组合选择 (bind:group)？

在此示例中，如果选择了多个字母，则选择会正确传播和绑定。但是，如果随后选择了数字，则字母选择将替换为所选数字，而不是将所选数字与所选字母连接起来。

// App.svelte
<script>
    import Selector from './Selector.svelte';

    let selection = [];

    $: console.log(selection);
</script>

<h2>Letters</h2>
<Selector options={['A', 'B', 'C']} bind:selection />

<h2>Numbers</h2>
<Selector options={[1, 2, 3]} bind:selection />

// Selector.svelte
<script>
    export let options;
    export let selection;
</script>


<div class="selector">
    {#each options as option}
    <label>
        <input type="checkbox" value={option} bind:group={selection} />
                {option}
    </label>
    {/each}
</div>

回复：https://svelte.dev/repl/f97f859ea567473b9732b8933db870f7?version=3.20.1

Answer 1

是也不是。

实际上，您所做的确实将变量绑定到组件的各个实例中。对象是相同的，===，具有相同的引用...直到发生这种情况：

        selection = value;

这来自您的 REPL 中的编译代码。当您单击一个复选框时，Svelte 会创建一个包含选中值的新数组，并将其分配给 bind:group 变量。此时，变量还是一样的……但它的内容已经被一个新的数组引用所取代。这就是为什么当你改变组时，你失去了前一个的价值。

您可以通过更新您的 REPL 使 selection 成为对象而不是数组，并添加一些逻辑来按键存储值来证明这一点。

例如，在 App.svelte 中，将选择更改为一个对象：

    let selection = {};

并且在Selector.svelte中，绑定到一个中间变量并只写入对象的属性（而不是对象本身）：

<script>
    export let options;
    export let selection;

    let group = []
    $: for (const option of options) {
        selection[option] = group.includes(option)
    }
</script>


<div class="selector">
    {#each options as option}
    <label>
        <input type="checkbox" value={option} bind:group />
                {option}
    </label>
    {/each}
</div>

Updated REPL

以某种方式打印 selection 的值，您会看到它没有重置，而是包含所有选择器的值。

因此，回到您的问题，问题实际上是作业。并且您无法直接对此做很多事情。 Svelte 中没有任何东西可以合并绑定值...但是，既然我们已经理解了这个问题，我们就可以解决它了。

解决方案是避免直接绑定 public prop（即 selection），而是绑定到一个中间变量，就像我们之前的例子一样，并以某种方式自己进行合并（很多如何在这里可用）。

这是一种重写选择器组件以接受变量共享的方法：

<script>
  export let options;
  export let selection;

    let group = []

    const update = () => {
      selection = selection
        .filter(x => !options.includes(x))
        .concat(group)
    }

    // when group changes, update
    $: group, update()
</script>

<div class="selector">
  {#each options as option}
    <label>
      <input type="checkbox" value={option} bind:group />
          {option}
    </label>
  {/each}
</div>

REPL

注意：我没有将 selection = selection.filter(x => !options.includes(x)).concat(group) 表达式直接放入反应块中，因为当 selection 更改时我们的更新将被触发。因为它是共享的，所以它会从外部发生变化。实际上，这将是一个无限循环条件，但 Svelte 有专门针对这种情况的保护（对于反应性块）。但最好不要依赖那个，也避免浪费。这里只有当我们本地的group改变时才会触发，这正是我们需要的

是否可以使用 Svelte 跨多个组件绑定相同的变量？

Is it possible to bind the same variable across multiple components with Svelte?

svelte

svelte-component