vue組件props傳值,對象獲取不到的問題

    先說問題，父組件利用props向子組件傳值，瀏覽器console有這個值，可是獲取不到內部的屬性，困了我3個小時，真的**

• 父組件定義了personal這個值。在父組件接口中給這個值從新賦值。
• 子組件接受這個值,瀏覽器console能看到這個值，可是取不到屬性的值。

---

如下爲原代碼

一、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

父組件

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

接下來子組件就能watch到personal了 子組件

watch:{
      personal(newValue,oldValue){
        console.log(181,newValue) 
      },
/** 輸出 { data: res.data.data, state: 'edit' } **/
    }
複製代碼