Svelte 组件不会对变量变化做出反应

Question

我在组件上有一个变量，并且从组件中导出了一个更改该变量值的函数；该函数被导入另一个组件以在触发时更改变量。打开的类应该添加到组件中的 h1 元素中。

组件.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>

请好心人告诉我我在这里做错了什么。我还为此问题创建了REPL。非常感谢任何传入的援助。提前致谢。免责声明：我在 Svelte 非常缺乏经验。

Answer 1

问题是您使用的是context="module" 脚本：

带有context="module" 属性的<script> 标记在模块首次评估时运行一次，而不是针对每个组件实例。 module 脚​​本中定义的变量不是响应式的——即使变量本身会更新，重新分配它们也不会触发重新渲染。对于多个组件之间共享的值，请考虑使用存储。

Docs

由于模块脚本中只有一个实例，因此您也无法使用组件的多个实例：它们都将共享相同的active 值。

您可以通过正确使用实例脚本来修复代码，但这需要您在组件上使用 bind:this 来获取对组件实例的引用：

<!-- In component -->
<script>
    let active = false;
    export function toggleColor() { active = !active; }
</script>

<!-- Usage -->
<script>
    import Component from "./Component.svelte";
    let component;
</script>

<Component bind:this={component} />
<button on:click={() => component.toggleColor()}>
    Click to change color
</button>

REPL

但是，这不是您通常会这样做的方式。相反，只需将 active 值作为道具公开并从外部更新它：

<!-- In component -->
<script>
    export let active = false;
</script>

<!-- Usage -->
<script>
    import Component from "./Component.svelte";
    let active = false;
</script>

<Component {active} />
<button on:click={() => active = !active}>
    Click to change color
</button>

REPL

（顺便说一句，你应该不是将点击处理程序添加到任意元素，但使用 <button> 代替。这样它将更易于访问，例如聚焦时触发进入。）