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