解决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对象的值。都能解决获取不到父组件传过来的对象的问题