vueコンポーネントprops伝値オブジェクトが入手できない問題を解決します。
まず問題です。父のコンポーネントはpropsを利用してサブコンポーネントに値を伝えます。ブラウザのconsolieにはこの値がありますが、内部の属性が取れなくて、私は3時間眠くなりました。本当です。
personial
ソロ
以下は元のコードです
1、home.vue(親コンポーネント)--persoalは伝えられたパラメータです。
149行はstateの値があるのに、150行の出力がなくなってしまいました。超おかしいですか?
後はオーディエンスの説明を受けますが、ブラウザのconsolie.logもないはずです。
だから、実は私達のサブコンポーネントは最初からこのpersonalの対象を取っていません。
3、解決方法--ウォッチを使う
親コンポーネント
以上は小编が绍介したvueコンポーネントpropsの対象外の问题を解决するために、皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
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の対象外の问题を解决するために、皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。