关于前端:Vue-props传参多层引用数据类型的处理

场景：
vue2中，子组件中不能批改父组件传入的props，否则会报错。
然而理论应用中，发现下面的形容，限于props为根本数据类型的状况 （如boolean，number，string）。
如果传入的props是两层及两层以上的援用数据（如数组内套对象 [object1, object2, ... ]，这种状况下），批改props，不会报错。

举例如下：

父组件
<Child :basic-data="params"></Child>
data() {
return {

params: [  { name: "Mike", age: "17" },  { name: "Rose", age: "18" }]

}
}

子组件
<div v-for="item in basicData" :key="item.name">
<span>{{item.name}} 年龄:</span>
<input type="text" v-model="item.age">

</div>
props: {

basicData: { type: Array, default: []}

}

这种状况下，子组件中批改年龄是没问题的，不会报错，且父元素中的params也会被批改掉。

为了防止这种状况，应该防止间接应用v-for="item in basicData",而应该用一个由basicData深拷贝进去的对象放在dom中渲染。
这个深拷贝能够在data中，也能够在computed中，要看需要是怎么的。

深拷贝的具体实现要分场景，最简略的的JSON.parse()+JSON.stringify()，Object.assign()，甚至援用第三方库（如lodash）的cloneDeep都能够。

这里给出一个用computed的实现

duplicateBasicData: {
get() {

return cloneDeep(this.basicData);

},
set(val) {

this.$emit("change", val);

}
}

在set的时候通过$emit将数据变更显式的传递到父组件。
父组件监听"change"事件，将事件传递来的duplicateBasicData新值赋值给params。