解决vue组件props传值,对象获取不到的问题

vue组件props传值,对象获取不到的问题

问题描述： 父组件利用props向子组件传值，浏览器console有这个值，但是获取不到对象里的属性，console对象的属性值，打印出来值为undefined。

父组件定义了echartObj这个对象。在父组件接口中给这个值重新赋值。 子组件接收这个值,谷歌浏览器console能看到这个值，但是取不到属性的值。watch也监听不到echartObj对象值的变化

代码如下： 父组件代码

// 父组件 给 子组件BarChartsMonitor 传递 echartObj这个对象 
<div class="item_echarts">
       <BarChartsMonitor :echartObj="echartObj"></BarChartsMonitor>
</div>
// 父组件data中这样定义
echartObj:{
          
   },
// 传递数据
this.echartObj.xData1 = res.xData1;
this.echartObj.xData2 = res.xData3;
.....

子组件代码

export default {
          
   
    props: {
          
   
        echartObj: {
          
   
        	type:Object,
        	default:()=>{
          
   }
		}
    },
    watch: {
          
   
        echartObj:{
          
   
        	deep:true,
        	handler(val){
          
   
        		console.log(val); // 可以打印出来，并且可以看到val.xData1这个数组
        		console.log(val.xData1);// 值为 undefined
			}
        }
    },
}

解决方法： 方法1：可以用JSON.parse(JSON.stringify(this.echartObj)）

this.echartObj.xData1 = res.xData1;
this.echartObj.xData2 = res.xData3;
this.echartObj = JSON.parse(JSON.stringify(this.echartObj));

方法2：用以下形式给对象赋值

this.echartObj  = {
          
   
	xData1:res.xData1,
	xData2:res.xData2
}

方法3：Object.assign({},obj)也可以

const echartObj = {
          
   };
echartObj.xData1 = res.xData1;
echartObj.xData2 = res.xData2;
this.echartObj = Object.assign({
          
   },echartObj);

上面三种方法，在子组件都能watch到父组件传过来的testobj对象的值。都能解决获取不到父组件传过来的对象的问题