当值发生变化时，Svelte 不会更新组件

Question

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

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

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

主.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

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

正确的语法是：startEditing 如您在此处所见，处理程序是一个 函数。

在另一个事件处理程序中：<button on:click={() => startEditing('main')}> 您正确地传递了一个函数。