Svelte中变量变更时重新执行语句的实现方法

你的问题核心是layout的计算没有跟随controls的变化自动更新——Svelte里普通的变量赋值只会在组件初始化时执行一次，不会追踪依赖变量的变化。要实现controls变更时重新运行getLayout，需要用Svelte的响应式语句（前缀$:）。

修改后的代码 #

<script>
    let controls
    
    // 用$:标记响应式语句，当controls变化时自动重新执行
    $: layout = getLayout(controls)
    // 给console.log也加上响应式，方便调试变量变化
    $: console.log(layout)
</script>

<div>
    <MyDropdown bind:controls />
    
    <!-- main content area -->
    {#if layout?.active}
        <p>Active</p>
    {/if}
    
    {#each (layout?.content || []) as item}
        <div>{item.id} - {item.description}</div>
    {/each}
</div>

关键说明 #

• 前缀$:是Svelte的响应式标识，它会自动追踪语句中用到的变量（这里是controls），当变量值变化时，整个语句会重新执行，从而更新layout。
• 代码里加了可选链操作符?.和|| []，是为了避免controls初始为undefined时，getLayout返回undefined导致模板报错，你可以根据getLayout的实际返回值调整这部分。
• 要确保MyDropdown组件正确实现了bind:controls，也就是它内部会直接更新传入的controls变量，而非维护独立的内部状态。

内容的提问来源于stack exchange，提问作者noblerare