如果在同一个上下文中多次使用同一个组件,绑定(bind)属性是否可以在它们的实例之间共享?
例如,如果我有一个创建复选框的组件,如何为字母选择器和数字选择器组合选择 (bind:group
)?
在此示例中,如果选择了多个字母,则选择会正确传播和绑定(bind)。但是,如果随后选择了数字,则字母选择将替换为所选数字,而不是将所选数字连接到所选字母。
// 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
最佳答案
是和不是。
实际上,您所做的确实将变量绑定(bind)到组件的各个实例中。对象相同,===
,具有相同的引用...直到发生这种情况:
selection = value;
这是来自你的 REPL 中的编译代码。当你点击一个复选框时,Svelte 会创建一个包含选中值的新数组,并将其分配给
bind:group
。多变的。此时,变量还是一样的……但是它的内容已经被一个新的数组引用替换了。这就是为什么当你改变组时,你会失去前一个的值(value)。你可以通过更新你的 REPL 来证明这一点,使
selection
一个对象而不是一个数组,并添加一些逻辑来按键存储值。例如,在 App.svelte 中,将选择更改为对象:
let selection = {};
在 Selector.svelte 中,绑定(bind)到一个中间变量并只写入对象的 props(而不是对象本身):
<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 中没有任何东西可以合并绑定(bind)值……但是,既然我们已经理解了这个问题,我们就可以解决它。
解决方案是避免直接绑定(bind)公共(public)属性(即
selection
),而是绑定(bind)到中间变量,就像我们之前的示例一样,并以某种方式自己进行合并(这里有很多可用的方法)。这是您可以重写 Selector 组件以接受变量共享的一种方法:
<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)
表达式直接进入 react block ,因为我们的更新将在 selection
时触发变化。而且由于它是共享的,它会从外部发生变化。实际上,这将是一个无限循环条件,但 Svelte 专门针对这种情况提供了保护(对于 react 性 block )。但最好不要依赖,也避免浪费。这里它只会在我们本地的 group
时触发。变化,这正是我们所需要的。
关于svelte - 是否可以使用 Svelte 跨多个组件绑定(bind)相同的变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60977647/