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

Я думаю, что есть 3 способа решить эту проблему:

localstore:

• создать магазин и подписаться на него в своем приложении. например: https://svelte.dev/tutorial/writable-stores

отправка:

• как вы делаете сейчас;)

двусторонняя привязка:

• например: https://svelte.dev/tutorial/text-inputs

Answer 3

Svelte имеет двустороннюю привязку через ключевое слово bind. Возможно, вы видели это при связывании входных данных формы, и это работает таким же образом в ваших собственных родительско-дочерних отношениях.

Вот как это выглядит: <Login bind:user={user} /> или сокращенное обозначение, когда имена совпадают: <Login bind:user />.

Все, что вам нужно сделать, это определить опору в дочернем компоненте (Login), и когда вы обновите его, родительское значение изменится.

Вот REPL, чтобы увидеть это в действии

Я укажу на некоторые дополнительные моменты, если вам интересно:

1. Компоненты обычно начинаются с заглавной буквы. Это позволяет компилятору отличать их от обычных HTML компонентов. Кто знает, когда-нибудь может появиться компонент HTML с именем <login>! ?
2. Хотя описанная выше стратегия работает для логинов пользователей, типичный способ справиться с этим - использовать концепцию магазинов .