svelte：组件如何修改其父级上的变量/对象？答案

【问题标题】：svelte: how can a component modify a variable/object on its parent?svelte：组件如何修改其父级上的变量/对象？
【发布时间】：2020-07-10 19:51:00
【问题描述】：

我有一个包含用户对象和登录组件的主应用程序

<script>
let user = {}
</script>

hello {user.username}
<login user={user} />

在登录组件中，我调用 ajax 并接收到一些数据，例如：

user = {id:1, username:"john"}

然后我如何“通知”主应用程序我已经更新了用户，以便它显示你好，约翰

现在，我发送一个事件

import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

有没有更好的方法来实现这一点？

【问题讨论】：

【解决方案1】：

在 Svelte 中，您可以将值绑定到组件，这样当子组件更新时，它也会更新父组件。

你只需要改变

<login user={user} />

到

<login bind:user={user} />

这是demo

【讨论】：

【解决方案2】：

Svelte 通过 bind 关键字进行 2 路绑定。您可能在绑定表单输入时看到过它，它在您自己的父子关系中的工作方式相同。

它的外观如下：<Login bind:user={user} /> 或名称相同时的简写：<Login bind:user />。

您所要做的就是在子（登录）组件中定义一个道具，当您更新它时，父值会发生变化。

如果你有兴趣，我会指出一些额外的东西：

【讨论】：

【解决方案3】：

我认为有3种方法可以解决这个问题：

本地商店：

调度：

双向绑定：

【讨论】：