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

Posted 2023-03-08

参考技术A 先说问题，父组件利用props向子组件传值，浏览器
console
有这个值，但是获取不到内部的属性，困了我3个小时，真的**
personal
console
以下为原代码
1、home.vue（父组件）--personal是被传的参数
<!--子组件-->
<form-picker
class="form-picker"
:personal="personal"
>
</form-picker>
export
default

data()
return
personal:
state:'',////判断是修改状态，还是新增状态
add/edit
data:[]


,
mounted()
this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>
this.personal.data
=
res.data.data
//这里给personal对象赋值接口传来的数据
)
,

2、formPicker
（子组件）
--接收personal
export
default

props:['active','personal'],
mounted()
console.log(149,this.personal)
console.log(150,this.personal.state)


运行结果
明明149行有
state
值，150行输出却没有了,是不是超级奇怪
后面经过大佬的讲解，其实浏览器console.log也是应该没有的
所以，其实我们子组件一开始根本就没有取到这个personal这个对象。
3、解决方法--使用watch
父组件
export
default

data()
return
personal:
state:'',////判断是修改状态，还是新增状态
add/edit
data:[]


,
mounted()
this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>
//this.personal.data
=
res.data.data
//这里给personal对象赋值接口传来的数据
//使用以下方法重新赋值，上面方法watch监听不到，具体什么原因，我也不清楚，知道的告知我！谢谢
this.personal
=

data:
res.data.data,
state:
'edit'

)
,

接下来子组件就能
watch
到
personal
了
子组件
watch:
personal(newValue,oldValue)
console.log(181,newValue)
,
/**
输出

data:
res.data.data,
state:
'edit'

**/

总结
以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:vue2.0
子组件改变props值,并向父组件传值的方法详解vue父子组件间传值(props)vue之父子组件间通信实例讲解(props、$ref、$emit)vue组件中使用props传递数据的实例详解vue父组件向子组件(props)传递数据的方法vue父组件通过props如何向子组件传递方法详解详解vue2父组件传递props异步数据到子组件的问题