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

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

ruisui882个月前 (04-09)技术分析41

利用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父子组件,利用条件延迟创建子组件,达到参数传递目的” 的相关文章

基于archlinux的发行版有哪些?

Arch Linux 是一个 Linux 发行版,采用滚动更新的模型,这意味着 Arch Linux 不会定期发布新版本,而是持续接收更新和升级,保持系统与最新软件版本的同步。Arch Linux 以其极简主义、简单性和用户定制为中心的特点而闻名,专注于让用户对其系统配置具有完全控制权。然而,它也以...

学无止境:Git 如何优雅地回退代码

来源:https://zhenbianshu.github.io前言从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码、提交、合并等,更复杂的操作没有使用过,看过的教程也逐渐淡忘了,有些对不起 L...

neovim 0.9在win下配置 python开发环境

初级的一些配置点击下面链接查看neovim安装插件管理器neovim常用快捷键neovim python开发环境简易配置方法 (需要手动键入命令行 运行python)安装neovim python的模块pip install pynvim pip install jedi pip install n...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

数组、去重、排序、合并、过滤、删除

ES6数字去重 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4]2、ES6数字排序 [1,2,3,4].sort(); // [1, 2,3,4],默认是升序...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...