使用 Svelte 在每个块中使用定义的变量

Question

我在使用嵌套文件更新变量时遇到了一些麻烦。我的期望是当复选标记为 checked 时，变量 switchTouch 被更新。我显然做错了什么，因为事实并非如此。欢迎任何指点：

<script>
    import Control from './Control.svelte'
    
    let switchTouch = false
    let switchScreen = true
    
     let controls = [
    { id: 1, title: 'Touch Targets', checked: switchTouch },
    { id: 2, title: 'Screen Reader', checked: switchScreen }
  ];
    
$: console.log(switchTouch)

</script>

{#each controls as control}
<Control title={control.title} bind:value={control.checked} />          
{/each}

我正在使用的 REPL 用于更详细的示例

Answer 1

您的代码中的控件已更新，我相信您想查看 App.svelte 中的组件更改，您可以通过导出变量并使用 afterUpdate 生命周期发送更改来做到这一点.我写了一个有用的小片段检查 REPL

Answer 2

您的代码的第一个问题是您绑定的是 value 而不是 checked

<Control title={control.title} bind:value={control.checked} />

应该是

<Control title={control.title} bind:checked={control.checked} />

第二个是您的代码将控件的初始值设置为 switchTouch 但这只是一个赋值，您的代码中没有任何地方是 link 从控件返回到switchTouch。然而，这可以使用反应式语句轻松解决：

$: switchTouch = controls[0].checked

每当第一个控件的 checked 属性有效地在两个变量之间创建一个 link 时，这将更新 switchTouch。

使用 Svelte 在每个块中使用定义的变量

Using defined variable in Each block with Svelte

svelte