Vue.js中子组件修改对象prop影响父组件，求推荐合规处理方案

你遇到的现象本质是JavaScript引用类型的特性导致的：ref(props.initialStudentObj)只是把原对象的引用包裹进了ref响应式实例，没有切断和父组件原对象的引用关联，所以你在子组件修改这个对象的属性时，本质上修改的还是父组件的同一个对象，自然会同步变更，这不属于Vue单向绑定规则的例外，只是JS本身的传值逻辑导致的。

根据不同的业务场景，有三种主流的合规处理方式：

方案1：深拷贝初始化本地状态（适用子组件独立维护状态的场景） #

如果你的子组件仅需要在内部临时修改这个对象，不需要实时同步给父组件（比如表单子弹窗、编辑弹窗，只有用户点击确认后才需要同步结果），可以在初始化本地ref时深拷贝props的值，直接切断引用关联：

// 原生JS写法，支持大部分常见JS类型（函数、Symbol等特殊类型除外）
const studentObj = ref(structuredClone(props.initialStudentObj))

// 如果项目已经引入lodash，也可以用cloneDeep，兼容性更强
// import { cloneDeep } from 'lodash-es'
// const studentObj = ref(cloneDeep(props.initialStudentObj))

后续用户确认提交修改时，再通过emit把修改后的新对象传给父组件处理即可，全程不会影响父组件的原始值。

方案2：v-model配合computed实现规范双向绑定（适用需要实时同步的场景） #

如果你的业务需求就是子组件的修改要实时同步给父组件，那就严格遵守Vue单向数据流规范，通过emit通知父组件自行修改，不要直接在子组件修改props：
首先父组件用v-model:参数名的格式传值：

<!-- 父组件模板 -->
<ChildComponent v-model:student="initialStudentObj" />

子组件定义对应的props和emit，用computed的get/set封装调用逻辑：

const props = defineProps(['student'])
const emit = defineEmits(['update:student'])

const studentObj = computed({
  get() {
    return props.student
  },
  set(newValue) {
    // 通知父组件更新原始值
    emit('update:student', newValue)
  }
})

如果只需要修改对象的单个属性不需要全量替换，也可以单独封装修改方法，每次修改后 emit 事件携带属性名和新值，父组件收到后自行更新对应属性即可。

方案3：全局状态管理（适用多组件共享状态的场景） #

如果这个学生对象是多个层级的组件都需要访问和修改的共享状态，可以直接把它放到Pinia或者Vuex这类全局状态库里管理，父子组件都直接从全局状态读取/提交修改，避免多层props传递导致的引用变更问题。

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