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 中，您可以将值绑定(bind)到组件，这样当子组件更新时，它也会更新父组件。
你只需要改变

<login user={user} />

到

<login bind:user={user} />

这是一个 demo