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



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

<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,可以看到它在中的作用


如果你感兴趣,我会指出一些额外的事情:

  1. 组件通常以大写字母开头。这允许编译器使用常规HTML组件来区分它们。谁知道呢,也许有一天会出现一个名为<login>的HTML组件!😅
  2. 虽然上面的策略适用于用户登录,但处理这一问题的典型方法是使用存储的概念

我认为有三种方法可以解决这个问题:

本地商店:

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

调度:

  • 如您当前所做;(

双向绑定:

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

相关内容

  • 没有找到相关文章

最新更新