1. 组件执行顺序导致:
父组件:created->子组件:created->子组件:mounted->父组件:mounted
2.问题子组件无法获取到值
//父组件
export default {
data(){
return{
arr:[]
}
},
created(){
},
methods:{
getData(){
_getListData({id:xxx}).then(res => {
this.arr = res
}).catch(err=>{
console.log("xxxx")
})
}
}
}
//子组件
export default {
props: {
formOptions: {
type: Array,
default: () => {
return []
}
}
},
data(){
return{
inFormOptions:[]
}
},
created(){
this.inFormOptions = this.inFormOptions
}
}
3. 原因:
根据父组件的执行顺序,父组件传递过来的formOptions是初始值,因此赋值失败。
4. 解决方法:
在父组件引用的地方添加v-if进行判断,如异步请求的值为初始值时则不渲染子组件,等到异步获取值完成后,v-if再进行渲染
<z-form v-if="arr.length" :form-options.sync="arr" ref="z-form"></z-form>