vueコンポーネントprops伝値オブジェクトが入手できない問題を解決します。


まず問題です。父のコンポーネントはpropsを利用してサブコンポーネントに値を伝えます。ブラウザのconsolieにはこの値がありますが、内部の属性が取れなくて、私は3時間眠くなりました。本当です。
personial
ソロ
以下は元のコードです
1、home.vue(親コンポーネント)--persoalは伝えられたパラメータです。

<!--   -->
<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行の出力がなくなってしまいました。超おかしいですか?
後はオーディエンスの説明を受けますが、ブラウザのconsolie.logもないはずです。
だから、実は私達のサブコンポーネントは最初からこのpersonalの対象を取っていません。
3、解決方法--ウォッチを使う
親コンポーネント

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'
     }
    })
  },
}
次のサブアセンブリは、personalのサブアセンブリにウォッチできます。

watch:{
   personal(newValue,oldValue){
    console.log(181,newValue) 
   },
/**   
    {
      data: res.data.data,
      state: 'edit'
     }
**/
  }
締め括りをつける
以上は小编が绍介したvueコンポーネントpropsの対象外の问题を解决するために、皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。