组件之间的Svelte无功变量共享

Question

我有一个关于组件之间的反应变量共享的问题。我有一个复选框的例子。每当只选中接收复选框时，我都希望返回一段带有特定消息的段落。但是，在组件2中只计算else语句。

也许我必须使用苗条的商店？我不知道如何做到这一点。

REPL可在此处找到：https://svelte.dev/repl/f2da2e91083f41098bd9b7c84ec199d2?version=3.49.0

应用程序组件看起来像这个

<script>
import Component2 from './Component2.svelte';

let checked_sink = true;
let checked_source = false;
export let sink_source_checkbox = ["Sink"]
</script>
<label>
<input type=checkbox name="sink_source" value="Sink" bind:group={sink_source_checkbox} bind:checked={checked_sink}>
Sink
</label>
<label>
<input type=checkbox name="sink_source" value="Source" bind:group={sink_source_checkbox} bind:checked={checked_source}>
Source
</label>
<Component2/> 
checked 1: {checked_sink} <br/>
checked 2: {checked_source} <br/>
{JSON.stringify(sink_source_checkbox.toString())} 

第二个组件看起来像这个

<script>
import sink_source_checkbox from './App.svelte';
</script>
{#if sink_source_checkbox.toString() === "Sink"}
<p>
It is only Sink
</p>
{:else}
<p>
It is not only Sink
</p>
{/if}

Answer 1

从Component2导出变量而不是import，并将其作为道具REPL 传递

(可能有各种方法只检查"Sink"…也许你可以减少你的例子，只使用组绑定而不使用bind:checked的并行跟踪。我在Repl中更改了这一点…(

<script>
export let checked
</script>
{#if checked.join() === "Sink"}
<p>
It is only Sink
</p>
{:else}
<p>
It is not only Sink
</p>
{/if}

在App.svelte 中

<Component2 checked={sink_source_checkbox}/>