当值更改时，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 函数并将此函数的 return 值 作为监听器添加到点击事件。

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

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

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

Svelte does not update the components when values change

javascript

svelte-3

sveltekit

Main.svelte

editing.svelte