Vue父子组件中克隆selectedUser prop为data对象为空问题如何解决

你的两种方案失效的核心原因是：子组件初始化（data赋值、mounted钩子执行）时，父组件的selectedUser还处于初始空对象状态，此时克隆得到的就是空值。后续你在父组件选中用户更新selectedUser时，子组件的本地data不会自动响应prop的变化，因此clonedUserObject一直保留初始的空值状态。

方案A：监听prop变化自动更新本地克隆（最通用） #

通过watch监听selectedUser的变化，每次prop更新时自动重新克隆到本地，适配任何弹窗渲染时机：

props: ['selectedUser'],
data() {
    return {
        clonedUserObject: {}
    }
},
watch: {
    selectedUser: {
        immediate: true, // 组件初始化时就执行一次回调，覆盖初始空值
        handler(newVal) {
            // 注意：如果selectedUser是多层嵌套对象，需要用深拷贝避免浅拷贝带来的引用关联
            // 单层对象可以用 this.clonedUserObject = Object.assign({}, newVal)
            this.clonedUserObject = _.cloneDeep(newVal)
        }
    }
}

方案B：控制子组件渲染时机（最简洁） #

如果你的编辑弹窗默认是隐藏状态，只有选中用户后才会打开，可以在父组件给子组件加v-if判断，只有selectedUser有有效值时才渲染子组件，此时你原来的方案2就可以正常运行：
父组件模板修改为：

<!-- 判断逻辑可以根据你的业务调整，比如只要存在用户id就判定为选中了有效用户 -->
<edit-user-modal 
    v-if="selectedUser.id" 
    :selected-user="selectedUser"
></edit-user-modal>

子组件保持你原来的方案2代码即可，因为子组件只会在selectedUser有值的时候才初始化，data赋值时就能拿到正确的用户数据。

• 如果你的用户数据存在多层嵌套结构，不要使用Object.assign做浅拷贝，否则修改克隆对象的深层属性时仍会影响原prop对象，建议使用lodash的_.cloneDeep做深拷贝，普通业务场景也可以用JSON.parse(JSON.stringify(newVal))实现简易深拷贝。
• 你当前将prop克隆到本地再修改的实现思路符合Vue单向数据流规范，避免了直接修改prop带来的隐式问题。

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