如果在同一个上下文中多次使用同一个组件,绑定属性是否可以在它们的实例之间共享?
例如,如果我有一个创建复选框的组件,如何将选择 ( 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