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

你可能感兴趣的:(VUE项目开发,vue,vue.js,javascript,前端)