在 svelte 中将值从子级传递到父级 - 绑定指令的直觉

Question

这是一个超级简单的问题，但令我困扰的是我没有完全理解这里发生的事情，因为我真的很喜欢 svelte 并且想理解它。

有一个关于将数据从孩子传递给父母的精彩视频： https://www.youtube.com/watch? v=lqvY_0gJf_I&list=PLoWoeRXn334kDuFrZqIqHrFCN71fSZE4X&index=1&t=1804s

他们的第一种方法是双向数据绑定。

它基本上像这个 REPL 一样工作https://svelte.dev/repl/24adfb0a93734265952e2870155aeb49?version=3.43.1

我只是不完全理解这里的数据流（以及一般情况下的数据流）。如果我更改渲染的输入字段中的某些内容，这本质上意味着我正在更改子项中的某些内容，对吧？在这种情况下，我假设

1. 发生的事情是person子项中的变量被用户更改
2. 由于它有bind指令，它会以某种方式将此数据从子级传递到父级
3. 在父组件中，通过将p（在父组件中用值初始化的变量）的值传递给person子组件的导出变量来初始化子组件的实例
4. 以某种方式p，通过修改子级中的值来更改父级中的变量，并更新upper子级中的反应值（变量）。

现在我的问题是：为什么要p更新这个变量以及对这个指令有没有直观的理解bind:<variable>。我根本无法理解它。

我认为还有其他可能性将数据从子级传递到父级（例如事件调度）。但让我们从这个开始吧；）

//App.svelte
<script>
    import Box from './inp.svelte'
    let p = 'MyName'
    $: nameUpper = p.toUpperCase()
</script>

<Box bind:person={p} />

<p>Reactive value in the parent component: {nameUpper}</p>

<hr />

// inp.svelte
<script>
    export let person = 'valueInChild'
</script>

<input type="text" placeholder="put the name here" bind:value={person} />

Answer 1

为了直观地理解，您只需想象孩子和父母都指的是同一个对象。

请注意，在您的示例中，如果将以下内容添加到App.svelte

<input type="text" placeholder="put the name here" bind:value={p} />

您将看到更新父级中的值也会显示子级。因此，理解该指令的最佳方法bind:是它不会复制，它实际上是一个且相同的对象/值/引用...在父级和子级中。