svelte：组件如何修改其父组件的 variable/object？

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} />

这是一个demo

Answer 2

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

如下所示：<Login bind:user={user} /> 或 shorthand，当名称相同时：<Login bind:user />.

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

Here is a REPL to see it in action

---

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

1. 组件通常以大写字母开头。这允许编译器将它们与常规 HTML 组件区分开来。谁知道，有一天可能会有一个名为 <login> 的 HTML 组件！
2. 虽然上述策略适用于用户登录，但处理此问题的典型方法是使用 stores 的概念。

Answer 3

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

本地商店：

• 创建一个商店并在您的应用程序中订阅它。例如：https://svelte.dev/tutorial/writable-stores

调度：

• 正如您目前所做的那样 ;)

双向绑定：

• 例如：https://svelte.dev/tutorial/text-inputs