【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}}age:
props:{basicData:{type:Array,default:[]}}这样修改age中的age是没有问题的subcomponent,no会报错，父元素中的params也会被修改。为了避免这种情况，应该避免直接使用v-for="iteminbasicData"，而是使用一个从basicData深度复制的对象在dom中渲染。这个深拷贝可以是数据或计算的，这取决于需求。深拷贝的具体实现要看场景。最简单的JSON.parse()+JSON.stringify()，Object.assign()，甚至引用第三方库（如lodash）的cloneDeep都可以。这是duplicateBasicData的计算实现：{get(){returncloneDeep(this.basicData);},set(val){this.$emit("change",val);}}passed$emit显式地将数据更改传递给父组件。父组件监听“change”事件，将事件传过来的duplicateBasicData的新值赋值给params。
