Svelte组件变量变更无响应问题求助

问题描述 #

在Component.svelte中定义变量active，导出ToggleColor函数修改该变量；在App.svelte中导入此函数后，触发时控制台显示变量值已变更，但组件的h1元素未响应添加/移除opened类。

相关代码如下：

Component.svelte #

<script context="module">
    let active = false;
    
    export function ToggleColor() {
        active = !active;
        console.log(active)
    }
</script>

<h1 id="color" class:opened={active}>Hello</h1>

<style>
    #color {
        color: red
    }
    #color.opened {
        color: blue !important;
    }
</style>

App.svelte #

<script>
    import Component, {ToggleColor} from "./Component.svelte";
</script>

<Component />

<div on:click={ToggleColor}> click to change color </div>

问题根源 #

你使用了<script context="module">脚本块，这里面的active是模块级共享变量，不属于单个组件实例的响应式状态：

1. Svelte的响应式更新机制只追踪组件实例内部（普通<script>块）的变量变更，模块级变量的修改不会触发组件重新渲染；
2. 若创建多个Component实例，所有实例会共用同一个active值，这通常不符合组件封装的预期。

修复方案 #

方案1：Props+事件传递状态（推荐，符合Svelte组件设计规范） #

由父组件维护状态，通过props传递给子组件，子组件无需导出修改函数：

Component.svelte

<script>
    // 接收父组件传递的active状态
    export let active = false;
</script>

<h1 id="color" class:opened={active}>Hello</h1>

<style>
    #color {
        color: red
    }
    #color.opened {
        color: blue !important;
    }
</style>

App.svelte

<script>
    import Component from "./Component.svelte";
    // 父组件维护状态
    let active = false;
    
    function ToggleColor() {
        active = !active;
    }
</script>

<Component {active} />

<div on:click={ToggleColor}> click to change color </div>

方案2：绑定组件实例调用方法 #

如果需要保留子组件内的状态修改逻辑，可以通过绑定组件实例的方式调用其方法：

Component.svelte

<script>
    // 组件实例内部的响应式变量
    export let active = false;
    
    export function ToggleColor() {
        active = !active;
    }
</script>

<h1 id="color" class:opened={active}>Hello</h1>

<style>
    #color {
        color: red
    }
    #color.opened {
        color: blue !important;
    }
</style>

App.svelte

<script>
    import Component from "./Component.svelte";
    // 绑定组件实例
    let componentInstance;
</script>

<Component bind:this={componentInstance} />

<div on:click={() => componentInstance.ToggleColor()}> click to change color </div>

内容的提问来源于stack exchange，提问作者Nguyen Hieu Minh