子组件父组件执行顺序
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"
> 