[Vue] props传参-多层引用数据类型的处理

场景:
vue2中,子组件中不能修改父组件传入的props,否则会报错。
但是实际使用中,发现上面的描述,限于props为基本数据类型的情况 (如boolean,number,string)。
如果传入的props是两层及两层以上的引用数据(如数组内套对象 [object1, object2, ... ],这种情况下),修改props,不会报错。

举例如下:

父组件

data() {
return {

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

}
}

子组件


{{item.name}} 年龄:



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。

你可能感兴趣的