我有一个主应用程序,它包含用户对象和登录组件
<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();
有更好的方法来实现这一点吗?
在Svelte中,您可以将值绑定到组件,这样当子组件更新时,它也会更新父组件。
你只需要更改
<login user={user} />
至
<login bind:user={user} />
这是的演示
Svelte通过bind
关键字进行双向绑定。您可能在绑定表单输入时看到过它,并且它在您自己的父子关系中也以同样的方式工作。
它的外观如下:<Login bind:user={user} />
或名称相同时的简写:<Login bind:user />
。
你所要做的就是在子(登录(组件中定义一个道具,当你更新它时,父值就会改变。
这是一个REPL,可以看到它在中的作用
如果你感兴趣,我会指出一些额外的事情:
- 组件通常以大写字母开头。这允许编译器使用常规HTML组件来区分它们。谁知道呢,也许有一天会出现一个名为
<login>
的HTML组件!😅 - 虽然上面的策略适用于用户登录,但处理这一问题的典型方法是使用存储的概念
我认为有三种方法可以解决这个问题:
本地商店:
- 创建一个商店并在应用程序中订阅。例如:https://svelte.dev/tutorial/writable-stores
调度:
- 如您当前所做;(
双向绑定:
- 例如:https://svelte.dev/tutorial/text-inputs