子組件父組件執行順序
1、父組件的created --- 2、子組件的created --- 3、子組件的mounted --- 4、父組件的mounted
問題：子組件的表單的fileds一直無法賦值
父組件
components: { eform },
created(){
this.wordId = this.$route.params.id
searchWordApi({'id':this.wordId}).then(
res=>{
if(res.code===200){
this.fields = res.data
}
}).catch(err=>{
console.log(err)
})
console.log( this.fields )
},
子組件
created () {
this.form = this.$form.createForm(this, {
mapPropsToFields: () => {
let filedsDealed={}
for(let key in this.fileds){
filedsDealed[key]=this.$form.createFormField({
value: this.fileds[key],
})
}
return filedsDealed
},
onValuesChange:(_, values)=>{
this.$emit('change', values);
},
});
},
原因
根據父子組件的執行順序，父組件傳遞過來的fileds是初始值，所以賦值失敗
方法 在父組件引用的地方給一個v-if判斷，如果異步獲取的值為初始值則不渲染，等到異步取值完成，v-if再取值渲染。
<eform
v-if="fields.length>0"
:formData="formList"
:fileds="fields[0]"
ref="form"
> 