当前位置:首页 > 技术分析 > 正文内容

Vue父子组件,利用条件延迟创建子组件,达到参数传递目的

ruisui883周前 (04-09)技术分析18

利用Vue开发页面过程当中, 页面组件化是必备的技巧之一。但是由于各种原因,子组件的数据需要来源于父页面加载完之后,父页面才能把参数传给子页面,例如,我们常见的一个工作流审批页面:



表单数据项的展现,是根据工作流的ID,动态展现出来的,也就是说,当父组件的组件生命周期执行完,子组件才会获得对应的数据。如果不加任何限制,子组件生命周期是和父组件一起完成的。

一个完整的Vue组件生命周期如下图所示:



在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段。即子组件的生命周期是在父组件的beforeMount阶段完成的。父组件的很多数据的加载,是在create()阶段完成的,虽然子组件的加载是在父组件的create()事件之后,但是我们的create()再次调用Ajax加载数据时,此时是异步的,子组件并不会等父组件的create()事件当中ajax全部加载完,再执行子组件的生命周期,这时,我们在父组件create()方法中获得的后台数据,是不会传入到子组件当中去的。在这种情况下该怎么办呢?


这时我们可以推迟子组件的加载,即利用Vue 的v-if 有条件加载组组间,例如,我们可以设置一个参数,当这个参数有值的时候,我们再加载子组件。回到上面那个例子:







我们设置当widgetForm.config !==undefined时,再加载子组件,此时我们在父组件的create()方法中加载widgetForm后台数据即可。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3401.html

标签: vue 流程图
分享给朋友:

“Vue父子组件,利用条件延迟创建子组件,达到参数传递目的” 的相关文章

厅监控结算中心加强高速公路联网收费系统运行管理

厅监控结算中心加强高速公路联网收费系统运行管理,一是严格PSAM卡管理要求,加强跟踪各营运公司PSAM卡使用情况,切实做到PSAM卡专人保管,定期核查,做好联网收费系统基础安全工作。二是督促各营运公司加强3G备份链路管理,保障数据应急通道的畅通,确保车道数据正常传输。三是落实标识站建设工作,督促各营...

79.idea中git合并分支操作分享

文章目录前言1.fetch的操作2.合并最新代码到当前的开发分支3.解决冲突4.分支合并:5.完成代码合并总结前言git的操作在日产的工作中也非常重要,团队化的代码管理,每次如果代码被别人覆盖或者自己的代码不能提交到服务器那是灾难性的结果,本篇进行一篇分享来总结下idea中git的操作帮助java开...

代码分支规范

一.gitflow工作流说明:主分支:master,稳定版本代码分支,对外可以随时编译发布的分支,不允许直接Push代码,只能请求合并(pull request),且只接受hotfix、release分支的代码合并。gitlab上做限制。热修复分支:hotfix,针对现场紧急问题、bug修复的代码分...

三、Uni-app + vue3 页面如何跳转及传参?

Vue 项目往往需要使用 vue-router 插件,刚开始入门 Uni-app + Vue3 项目的同学,会不会想着路由使用 vue-router V4 版本不就可以了吗?不怕大家笑话,我就是这样想的,毕竟我是第一次使用 Uni-app ,由于孕期记性贼差,所以我决定写成笔记,加深记忆。uni-a...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...

微信外H5跳转小程序——组件(vue项目)

场景有个H5(vue项目),需要实现点击商品item跳转到小程序,微信内和微信外都要支持,这里我们只介绍一下H5在微信外的跳转。如图所示,红框内是一个商品,就是点击这里,要跳转小程序:配置微信小程序云开发(云函数)1、开通云开发然后选择免费额度2、云开发权限设置找到权限设置,把这里的「未登录用户访问...