当值更改时，Svelte 不会更新组件

Question

我过去广泛使用过 Vue.js，所以这种模式可能无法很好地转化为苗条，我明白这一点。

我的问题是为什么以下内容在 svelte 中不起作用以及使用的正确模式是什么。

当我单击编辑按钮时，它按预期工作，但是当我单击保存时，它不会恢复到主组件。值似乎已更新，但组件未刷新。

Main.svelte

<script>
        import Editing from './editing.svelte';
        let data = true;
    let editing = false;
    let editingSection;

    function startEditing(section) {
        editingSection = section;
        editing = true;
    }

    function doneEditing() {
        editing = false;
        editingSection = '';
    }

</script>

<div>
    {#if data && !editing}
        <div>
                  Yes we have data!
        <button on:click={startEditing("main")}>Edit</button>
        </div>
    {/if}

    <!-- Are we in editing mode -->
    {#if editing}
        <Editing section={editingSection} on:done-editing={doneEditing}/>
    {/if}
</div>

editing.svelte

<script>
    import { createEventDispatcher } from 'svelte';
    export let section = null;

    const dispatch = createEventDispatcher();

    function save() {
        dispatch('done-editing');
    }

</script>

<div>
    Editing Section {section}
    <button on:click={save}>Save</button>
</div>

我什至尝试过使用 $: 来使语句具有反应性。不工作

Svelte 版本：3.34.0

SvelteKit

Answer 1

你的错误是<button on:click={startEditing('main')}> 没有做你期望它做的事情。它将在渲染过程中执行 startEditing 函数并将该函数的返回值添加为点击事件的监听器。

正确的语法是：<button on:click={() => startEditing('main')}> 如您在此处看到的，处理程序是一个函数。

在另一个事件处理程序中：<Editing on:done-editig={doneEditing}> 你正确地传递了一个函数。