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

REPL: https://svelte.dev/repl/f97f859ea567473b9732b8933db870f7?version=3.20.1