如何将多个组件 props 中的数据绑定到主应用程序？

Question

向阅读本文的任何人致以问候。我想先说一下，我对 Svelte 和整个组件框架都很陌生。这实际上是我开始学习的第一个框架。

我一直在学习一个教程，在教程的某些部分，我喜欢制作一些小东西，其中包含我刚刚学到的内容，以进一步熟悉这些材料。

最近，我开始学习组件和组件属性，并决定创建一个应用程序，该应用程序在表单中接收各种输入，然后通过将其记录到控制台来提交该表单。

正是在这样做的过程中，我注意到一些有趣的行为，我设法在为了编写这个问题而制作的单独应用程序中复制这些行为。

应用程序.svelte

<script>
  import Name1 from "./lib/Name1.svelte";
  import Name2 from "./lib/Name2.svelte";

  const obj = {
    fullname: {
      fName: '',
      lName: ''
    },

    fName: '',
    lName: ''
  }
</script>

<main>
  <Name1 fullName = {obj.fullname} />
  <br><br>
  <Name2 fName = {obj.fName} lName = {obj.lName} />
  <br><br>
  <button on:click={() => (console.log(obj))}>Log Data</button>
</main>

<style>
  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
  }
</style>

名称1.svelte

<script>
  export let fullName = {
      fName: '',
      lName: ''
    }
</script>

<label for="">First Name</label>
<input type="text" bind:value={fullName.fName}>

<label for="">Last Name</label>
<input type="text" bind:value={fullName.lName}>

名称2.svelte

<script>
  export let fName
  export let lName
</script>

<label for="">First Name</label>
<input type="text" bind:value={fName}>

<label for="">Last Name</label>
<input type="text" bind:value={lName}>

正如您所看到的，我创建了一个对象 (obj)，并将该对象中的各种属性作为属性传递给应用程序中的组件。我注意到的行为是，单击按钮并将对象记录到控制台后，只有对象属性 (fullName) 中包含数据，但其他任何内容都没有。

我之前的申请也是这样。我有文本输入和复选框输入，当将对象记录到控制台时，这些输入和复选框输入最终变为空白，但作为对象的任何属性都在其中包含数据。

我尝试解决此问题的方法是将整个对象（而不仅仅是对象内的属性）传递给组件并输入相应的数据。这实际上有效，当我将对象记录到控制台时，每个字段中都有数据。

我非常想知道这种行为的原因是什么，以及除了将整个对象传递给每个组件之外是否还有任何解决方案。

预先感谢阅读本文并提出解决方案/解释的人。

Answer 1

问题是如何传递属性：

  <Name1 fullName = {obj.fullname} />
  <Name2 fName = {obj.fName} lName = {obj.lName} />

这些是单向输入：值被传入，但不会从组件内部返回。这对于 仍然“有效” Name1，因为您传递一个对象，该对象是通过引用传递的，即同一个对象将被组件修改，而对于 则Name2传入值的副本，然后修改（或更确切地说替换）副本。这不会影响源对象。

bind当使用原始值时，您至少需要使用Name2：

  <Name1 bind:fullName = {obj.fullname} />
  <Name2 bind:fName = {obj.fName} bind:lName = {obj.lName} />

（如果Name1要fullName整体覆盖它，您还需要bind那里。）