父子组件input binding出现意外双向绑定问题求助

嘿，这个问题我太熟了！你遇到的根本不是input单向/双向绑定的问题，而是引用类型的数据共享在搞鬼～

为什么父组件会跟着子组件更新？ #

当你把父组件的observable对象（不管是Vue2的data还是Vue3的ref/reactive）传给子组件时，本质上传的是内存引用——父子组件用的是同一个对象/数组。子组件里修改input绑定的属性，其实是直接修改了这个共享对象的内容，父组件自然会同步更新，和input的绑定方式无关。

你之前尝试把observable转数组再转回新的observable没成功，大概率是因为只做了浅拷贝（比如用Array.from或者扩展运算符...），嵌套的对象/数组还是共享引用，所以修改后父组件依然会变。

可行的解决方案：切断引用，使用深拷贝 #

要让子组件单独修改数据，核心是给子组件传一份完全独立的拷贝，彻底切断和父组件数据的引用关系。这里有几种靠谱的方式：

1. 使用structuredClone（推荐，现代浏览器支持）

这是浏览器原生的深拷贝方法，支持日期、正则、Map/Set等特殊类型，比JSON方法更靠谱：

// Parent Component 中处理要传给子组件的数据
const selectedRow = ref({ 
  id: 1,
  name: "原数据",
  details: { age: 20 } // 嵌套对象也能拷贝
});

// 生成独立拷贝
const childRecord = ref(structuredClone(selectedRow.value));

然后在父组件模板里传给子组件：

<!-- Parent View -->
<ChildComponent :selectedRecord="childRecord" />

2. 使用JSON序列化/反序列化（兼容旧环境）

如果需要兼容不支持structuredClone的旧浏览器，可以用这个方法，但注意它会丢失函数、日期对象（转成字符串）等特殊类型：

const childRecord = ref(JSON.parse(JSON.stringify(selectedRow.value)));

3. 使用lodash的cloneDeep（项目已引入lodash时）

如果你的项目里已经用了lodash，直接用cloneDeep最省心：

import { cloneDeep } from 'lodash';

const childRecord = ref(cloneDeep(selectedRow.value));

子组件中使用本地独立数据 #

在子组件里，把props传来的拷贝数据存为本地状态，再绑定到input上：

<!-- Child View -->
<div>
  <label>名称：</label>
  <input v-model="localRecord.name" />
  <label>年龄：</label>
  <input v-model.number="localRecord.details.age" />
  <button @click="saveChanges">保存修改（可选同步父组件）</button>
</div>

// Child Component
import { ref, watch } from 'vue';

// 接收父组件传来的拷贝数据
const props = defineProps(['selectedRecord']);
// 初始化本地状态
const localRecord = ref(structuredClone(props.selectedRecord));

// 可选：如果父组件选中的记录变化，同步更新本地状态
watch(() => props.selectedRecord, (newVal) => {
  localRecord.value = structuredClone(newVal);
}, { deep: true });

// 如果需要手动同步回父组件，用emit触发事件
const emit = defineEmits(['onRecordUpdated']);
const saveChanges = () => {
  emit('onRecordUpdated', localRecord.value);
};

这样子组件修改localRecord时，完全不会影响父组件的原始数据；如果需要把修改后的结果同步给父组件，只需要调用saveChanges触发事件，父组件再决定是否更新自己的数据，完全可控。

避坑提醒：别用浅拷贝！ #

以下这些方法都是浅拷贝，只能拷贝对象的第一层，嵌套的对象依然共享引用，解决不了问题：

// ❌ 无效的浅拷贝
const badClone1 = { ...selectedRow.value };
const badClone2 = Object.assign({}, selectedRow.value);
const badClone3 = Array.from(selectedRow.value); // 数组的情况

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