在一个表单头封装时,选择器的下拉框数据是通过父组件传值得来的,但是出现了父组件有值而子组件为空的情况,但是请求返回是有数据的,所以我自己感觉可能是生命周期问题导致的,就是在我的请求还没有完成的时候,父组件已经把定义的那个字段的初始化的结果传给子组件了,之后找到原因如下:

          只用props进行父子传参,子组件在其一系列生命周期开始时是获取不到数据的。父子组件的生命周期流程如下:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
生命周期钩子是同步执行的,而向后端获取数据是异步的,如果在父组件的created中向后端异步获取数据,根据事件循环的顺序,子组件开始创建时是获取不到数据的。

解决以上问题的办法有以下几种:

        1、使用v-if 来控制子组件是否开始挂载,我们在请求成功之后,所传字段有值时才开始选择挂载子组件。(但是这种请求最好做一个异步的loading,因为当请求加载慢或者出现阻塞时页面面加载时间会比较长,有点影响视觉效果)        2、子组件中用watch更新要使用的数据。但是这种方法适用于当前数字对象没有子节点的。

        3、使用pinia来存储要传的数据,再加上持续化(避免刷新时数据丢失),即可。(请求可以写到store中的ts文件,然后在一进入项目时便调用),这种方法适用于以上两种方法无效,并且其他传参方法也无效时使用,毕竟这个方法中更适用于多个页面都有调用该请求的情况。

GitHub 加速计划 / vu / vue
95
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:7 个月前 )
9e887079 [skip ci] 5 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐