Svelte子组件更新含未定义属性的复杂对象问题咨询

针对你遇到的嵌套属性可能不存在、无法直接双向绑定且不想预处理对象的问题，这里提供一个简洁可行的解决方案，既保留响应式又支持编辑：

修改子组件 Edit.svelte #

<script>
  export let obj;
  
  // 响应式同步当前对象的color值，处理props缺失的情况
  $: color = obj.props?.color ?? '';
  
  // 当输入值变化时，确保嵌套属性存在并同步回原对象
  $: if (color !== undefined) {
    // 若props不存在则初始化空对象
    if (!obj.props) obj.props = {};
    obj.props.color = color;
  }
</script>

Set color: <input bind:value={color}>

方案说明 #

• 处理属性缺失：通过obj.props?.color ?? ''可选链+空值合并，避免props不存在时的undefined报错，同时给输入框一个默认空值。
• 响应对象切换：$:标记的响应式语句会监听obj的变化，当父组件切换选中对象时，color会自动同步新对象的对应值（包括新对象无props的情况）。
• 支持双向编辑：输入框绑定中间变量color，修改后通过第二个响应式语句同步回原对象——先检查并创建缺失的props属性，再赋值color，确保父组件的selectedObj实时更新。

这个方案完美避开了你尝试过的坑：

• 不会因props缺失触发报错
• 绕开了可选链无法直接双向绑定的限制
• 响应式语句确保对象切换时自动同步
• 中间变量可正常编辑，且修改会同步回原对象

内容的提问来源于stack exchange，提问作者Tom Soukup