vue props传值常见问题

Posted 2020-12-21 qianxiaox

传入的值想作为局部变量来使用,直接使用会 报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值

资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com

解决方案：

可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,

props:[‘listShop‘],
    data(){
      return{
        listShopChild:this.listShop
      }
    },
    created(){
      this.listShopChild=30
    }
    

对复杂数据类型，
1. 可以手动深度克隆一个复杂的数据出来,循环或者递归都行

//数组
var x = [1,2,3];
var y = [];
for (var i = 0; i < x.length; i++) {
    y[i]=x[i];
}
console.log(y);  //[1,2,3]
y.push(4);
console.log(y);  //[1,2,3,4]
console.log(x);  //[1,2,3]

//对象
var x = {a:1,b:2};
var y = {};
for(var i in x){
    y[i] = x[i];
}
console.log(y);  //Object {a: 1, b: 2}
y.c = 3;
console.log(y);  //Object {a: 1, b: 2, c: 3}
console.log(x);  //Object {a: 1, b: 2}

2. Object.assign   （看情况使用）
只会对只是一级属性复制，比浅拷贝多深拷贝了一层而已,所以还是无法达到深度克隆的目的.

3. 强大的jsON.stringify和jsON.parse

const obj1 = JSON.parse(JSON.stringify(obj))