Vue子组件未触发事件却更新父组件变量的原因及解决方法

为什么父组件的userAccount会被更新 #

Vue 单向数据流的规则仅限制直接修改 props 本身的引用，比如你在子组件内直接执行props.account = 新对象这类操作时，才会触发 Vue 的 props 只读警告。而对于Object、Array这类引用类型的 props，修改其内部的嵌套属性、数组成员时，由于 props 的引用地址没有发生变化，Vue 不会做拦截校验。

你的代码中子组件AccountForm.vue的写法const record = ref(props.account)，传入 ref 的是 props 中account对象的内存引用，因此record.value和父组件的userAccount、子组件的props.account本质指向同一个内存对象。你在子组件内通过 input 的 v-model 修改record.firstName、record.lastName时，实际修改的是这个共享对象的内部属性，父组件的对应变量自然会同步更新，这个现象和父子组件传值时是否使用 v-model 无关。

如何避免子组件修改同步到父组件 #

只需要在子组件初始化本地变量时，对传入的 props 对象做深拷贝，生成独立的副本即可，常用实现方案如下：

• 如果是单层简单对象，可直接用展开运算符拷贝：

const record = ref({...props.account})

• 如果是多层嵌套的对象，可使用浏览器原生的结构化拷贝方法：

const record = ref(structuredClone(props.account))

• 对于结构复杂的对象，也可使用成熟工具库的深拷贝方法，比如 lodash 的cloneDeep：

import { cloneDeep } from 'lodash-es'
const record = ref(cloneDeep(props.account))

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