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

    先说问题，父组件利用props向子组件传值，浏览器console有这个值，可是获取不到内部的属性，困了我3个小时，真的**vue

• 父组件定义了personal这个值。在父组件接口中给这个值从新赋值。
• 子组件接受这个值,浏览器console能看到这个值，可是取不到属性的值。

如下为原代码api

一、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对象赋值接口传来的数据
        })
    },
}

    
复制代码

二、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这个对象。

三、解决方法--使用watch

父组件bash

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，有大佬知道请告知！ui

接下来子组件就能watch到personal了 子组件this

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