Vue中子组件修改data意外变更父组件props问题咨询

问题原因 #

Vue中数组、对象这类引用类型的数据，直接赋值时不会生成新的独立副本，只是让新变量和原变量指向内存里同一个数据对象。

你的子组件mounted钩子中直接执行：

this.form_data.employer_questions = this.employer_question_formats

这就导致form_data.employer_questions和父组件传递的employer_question_formats（最终关联到Blade层的$employer_question_format）共享同一个数组引用。后续调用addMoreQuestion往数组里push元素时，本质是修改这个共享数组，自然会同步影响到所有引用它的地方，包括父组件的props。

正确处理方式 #

核心是创建原数组的独立副本，切断和原props的引用关联，让子组件的form_data.employer_questions成为完全独立的数据。

方法1：用JSON.parse(JSON.stringify())做深拷贝

适合数据结构不包含函数、Symbol等特殊类型的场景，是最便捷的深拷贝方式：

mounted() {
  this.form_data.employer_questions = JSON.parse(JSON.stringify(this.employer_question_formats))
}

方法2：用数组map+对象展开做浅拷贝

如果数组元素是简单对象，且不需要修改对象内部的嵌套属性，浅拷贝足够满足需求：

mounted() {
  this.form_data.employer_questions = this.employer_question_formats.map(item => ({ ...item }))
}

方法3：用第三方库做复杂深拷贝

如果数据结构包含嵌套对象、函数等复杂类型，可以用Lodash的cloneDeep方法：
先安装Lodash：

npm install lodash

子组件中使用：

import _ from 'lodash'

export default {
  // ...其他代码
  mounted() {
    this.form_data.employer_questions = _.cloneDeep(this.employer_question_formats)
  }
}

处理后，子组件对form_data.employer_questions的任何修改都只会作用于自身数据，不会再影响父组件的props，符合Vue单向数据流的设计原则。

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