时间戳

首页 > 解决方案 > 当值更改时，Svelte 不会更新组件

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

问题描述

我过去广泛使用 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>

编辑.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>

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

苗条版本：3.34.0

SvelteKit

标签： javascriptsvelte-3sveltekit

解决方案

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

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

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

推荐阅读