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

    先说问题,父组件利用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对象赋值接口传来的数据-----> a
          //使用以下方法重新赋值,上面方法watch监听不到,具体什么原因,我也不清楚,知道的告知我!谢谢
          this.personal = {  //---------->b
            data: res.data.data,
            state: 'edit'
          }
        })
    },
}
复制代码

注意:以上代码注释的地方,整个personal对象赋值watch不到,需要精确到属性赋值才可以watch,有大佬知道请告知!

接下来子组件就能watchpersonal了 子组件

watch:{
      personal(newValue,oldValue){
        console.log(181,newValue) 
      },
/** 输出
        {
            data: res.data.data,
            state: 'edit'
          }
**/
    }
复制代码

转载于:https://juejin.im/post/5cf790196fb9a07ece67bee1

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值