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

Question

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

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

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

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

应用程序.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 仍然“有效”，因为您传递了一个对象，即 passed by reference ，即同一个对象将被组件修改，而对于 Name2 ，则传入值的副本，然后修改(或更确切地说替换)副本。这不会影响源对象。

在使用原始值(如 Name2)时，您至少需要使用 bind:

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

(如果Name1要整体覆盖其fullName，您还需要那里的bind。)