赞
踩
最近在开发vue3的时候,父子组件加载顺序有问题
问题复现:计划单号需要生成,调用后端接口,刚开始是在子组件暴露出来的方法让父组件去调用
defineExpose({ setFormState, initTemplateOptions })
整个表单是使用的子组件进行封装,子组件在变化的时候发射事件让父组件更新
- 子组件:
- watch(
- () => formState.value,
- (now) => {_emit('formStateChangeHandle', now)},
- { deep: true }
- )
-
- const formState: Ref<formStateType> = ref({
- planCode:'' //计划单号
- })
-
- 父组件:
-
- const formStateChangeHandle = (state: any) => {
- /**
- * 监听formState改变
- */
- formState.value = state
- }
有时候由于网络请求太快,导致网络请求先回来,给表单赋值,但是watch后执行,就会导致子组件再把初始值的计划单号传给父组件,此时又会把空的值传过去,导致页面刚开始加载出来了计划单号,闪一下就没有了,初步排查是网络加载太快的原因。
解决方法:在调用接口的时候加个延迟函数
- nextTick(async () => {
- await init() // 请求字典集合
- setTimeout(() => {
- createPlanCode() // 生成包装条码
- })
- })
补充:
vue2组件加载顺序:
父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载,即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”
父组件监听子组件加载:
<Child @hook:mounted="doSomething" ></Child>
vue3监听子组件加载:
- <OutBoundBaseForm @vnode-mounted="doSomething" />
-
- const doSomething= () => {
- /**
- * @method 监听子组件加载
- */
- console.log('子组件加载了')
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。