svelte中具有临时编辑的绑定对象
提问于 2020-06-11 08:00:25
我想举个例子来说明我想要做的事：
https://svelte.dev/repl/91d21e1baa564ecea6afbc4df7d9d24c?version=3.23.2
其目标是实现双向绑定，但通过按钮控制/触发从组件到应用程序的方式。
简单的方法绕过了对象的直接引用。但是，克隆对象会阻碍从组件返回到应用程序的过程。
我很困惑，也想不出怎么做。
谢谢你的帮助。
编辑原始代码
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-11 08:30:08
你是正确的，你需要一个中介对象来做到这一点。
您必须小心的是，在修改本地副本时不要更新源对象。
以下是一种方法：
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变量本身就可以受到影响，而无需在其值更改时重新运行反应性块。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62328492
复制相关文章
腾讯云开发者
