共计 884 个字符，预计需要花费 3 分钟才能阅读完成。
场景：
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。