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

Question

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

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

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

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

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

我如何才能“通知”主应用程序我已经更新了用户，以便它显示 hello john

现在，我发送一个事件

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

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

Answer 1

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

你只需要改变

<login user={user} />

到

<login bind:user={user} />

这是一个演示

Answer 2

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

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

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

如果您有兴趣，我会指出一些额外的事情：