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

Question

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

这个很棒的视频是关于将数据从孩子传递给父母的： 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: 指令的最佳方式是它不会复制，它确实是同一个对象/值/引用...在父子节点中。