0

我有这个苗条的 repl 作为我正在尝试做的一个例子：

https://svelte.dev/repl/91d21e1baa564ecea6afbc4df7d9d24c?version=3.23.2

目标是进行双向绑定，但通过按钮控制/触发从组件到应用程序的方式。

由于对象的直接引用，简单的方法绕过了。但是，克隆对象会阻碍从 Component 到 App 的返回。

我很困惑，不知道该怎么做。

感谢您的帮助。

编辑原始代码

App.svelte

<script>
    import Component from "./Component.svelte";
    let object = {name: "project"};
</script>

<h1>Main</h1>
<input type="text" bind:value={object.name} />
<hr>
<Component bind:object={object} />

Component.svelte

<script>
    export let object;
    //$: tempObject = object;
    $: tempObject ={...object};
</script>

<h1>Component</h1>
<input type="text" bind:value={tempObject.name} />
<button type="button" on:click={() => object = tempObject}>Save</button>
4

1 回答 1

0

你是正确的，你需要一个中间对象来做到这一点。

您必须注意的是在修改本地副本时不要更新源对象。

这是一种方法：

Component.svelte

<script>
    export let object

    let local

    const update = () => {
        local = { ...object }
    }

    const commit = () => {
        object = local
    }

    // when source object changes, update local
    //
    // /!\ local must be appear in this reactive block, 
    //     or the update will loop back
    //
    $: object, update()
</script>

<h1>Component</h1>
<input type="text" bind:value={local.name} />
<button type="button" on:click={commit}>Save</button>

重要的一点是local变量不能出现在将更改从源传播到本地副本的反应块中。或者你会得到一种更新循环。

为此，请将local = {...object}分配替换为update您将从反应块调用的函数（在示例中）。这样，当local变量的值发生变化时，变量本身不会受到影响，而 Svelte 不会重新运行反应块。

于 2020-06-11T16:30:08.873 回答