Svelte多组件Props绑定主应用数据不同步问题求解

这个现象是JS值传递规则和Svelte组件数据流规则共同导致的：

• JS中字符串、数字、布尔值这类基础类型是按值传递：你把obj.fName（字符串类型）传入Name2组件时，传递的是这个值的副本，子组件内部修改自己的fName变量，只会改动子组件作用域内的副本，不会影响父组件里obj.fName的原始值。
• 对象、数组这类引用类型是按共享引用传递：你把obj.fullname传入Name1组件时，父子组件持有的是指向内存中同一个对象的指针，子组件修改fullName.fName本质是直接修改公共对象的属性，父组件自然能读到变化。

额外说明：Svelte默认遵循单向数据流规则，组件prop默认是父到子的下行传递，就算是基础类型，也需要显式声明双向绑定才能把子组件内的改动同步回父组件，靠引用类型蹭同步效果属于语言特性带来的“意外生效”，不是框架推荐的写法。

你不需要每次都传整个对象，有两个更符合Svelte设计规范的方案：

• 方案1：使用prop双向绑定语法（最简洁，官方推荐）
  只需要修改父组件调用Name2的代码，给要同步的prop加上bind:前缀即可，子组件代码不需要任何改动：

  <!-- App.svelte 中修改Name2组件调用 -->
  <Name2 bind:fName={obj.fName} bind:lName={obj.lName} />
  

  加上bind:后，Svelte会自动建立双向同步关系，子组件内对fName、lName的改动会实时同步回父组件的obj对应属性，和你用对象引用的同步效果一致，还不会让组件和父组件的数据结构强耦合。
• 方案2：手动派发更新事件（适合严格单向数据流场景）
  如果你不想用双向绑定语法，要严格保持数据下行、事件上行的单向流规则，可以在子组件内输入变化时派发自定义事件，父组件监听事件自行更新数据：
  先修改Name2.svelte：

  <script>
    import { createEventDispatcher } from 'svelte'
    const dispatch = createEventDispatcher()
    export let fName
    export let lName
  </script>
  
  <label>First Name</label>
  <input 
    type="text" 
    value={fName} 
    on:input={(e) => dispatch('update:fName', e.target.value)}
  >
  
  <label>Last Name</label>
  <input 
    type="text" 
    value={lName} 
    on:input={(e) => dispatch('update:lName', e.target.value)}
  >
  

  再修改父组件的调用逻辑，监听对应事件更新值：

  <Name2 
    fName={obj.fName} 
    lName={obj.lName}
    on:update:fName={(e) => obj.fName = e.detail}
    on:update:lName={(e) => obj.lName = e.detail}
  />
  

  实际上Svelte的bind:prop语法就是上述逻辑的语法糖，两种写法运行效果完全一致，可以根据项目的数据流规范选择。

你之前试的传递整个对象的方式虽然能跑，但会导致子组件强依赖父组件的对象结构，组件复用性会大幅降低，不建议作为常规方案使用。

内容的提问来源于stack exchange，提问作者Tchaly Leandre Jr.