vue 组件间传值浅拷贝原因，导致改变子组件数据影响到了父组件数据

子组件：
props: {
contentList: { // 数据列表
type: Array,
default:()=>{ return [] }
}
},
data() {
return {
contentListData: this.contentList
}
}
监听改变赋值

watch: {
‘contentList’: { // 数据变化。重新赋值
handler(val){
this.contentListData = this.contentList;
}
}
},

这样的话 contentListData 的对象数据改变的时候 ，contentList里面的数据也会改变。

如果需要的话可以这样操作。如果不需要可以使用深拷贝。
在公共js里面写个方法

export function deepCopy(obj) {
var result = Array.isArray(obj) ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === ‘object’ && obj[key] !== null) {
result[key] = deepCopy(obj[key]);
} else {
result[key] = obj[key];
}
}
}
return result;
}

组件引用
import { deepCopy } from ‘@/utils/common’;

监听赋值：
watch: {
‘contentList’: { // 数据变化。重新赋值
handler(val){
this.contentListData = deepCopy(this.contentList);
}
}
},