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

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

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

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

首个支持苹果 M1 Mac 的 Linux 发行版发布,面向用户开放下载

IT之家 3 月 20 日消息,Asahi Linux 是研究 Linux for Apple Silicon macs 的组织群体,3 月 18 日,Asahi Linux 宣布成功在 M1 MacBook Air 笔记本电脑上运行,并开放了 Asahi Linux 的下载安装。Asahi Lin...

我的VIM配置

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置项外,还可插件扩展。VIM的插件一般用vundle或vim-plug来管理,但我力求简单,不打算装太...

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

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

Vue中的路由配置常用属性

router:路由页面跳转的核心库;引入路由:import VueRouter from 'vue-router'; 注册路由:const router = new VueRouter({ })mode:模式路由有hash history两种模式:hash模式URL中包含#,#后边是...

一套代码,多端运行——使用Vue3开发兼容多平台的小程序

介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发了一些多端兼容运行的开发框架,今天来体验一下使用Taro来体验一下使用Vue3开发多平台运行的小程序,以便于兼容各大...

什么是异步,什么是同步,啥意思?

概述:本文讨论了程序设计领域的同步、异步和多线程的一些基本概念。同步异步这两个词翻译的其实不通。我是不知道这两个词是啥意思。同步:步伐整齐;异步:步伐不整齐。大概这个意思,但是在编程设计领域啥意思?国人的烦恼多来自于不明确的翻译所造成的后果。异步对应的英文是Asynchronous。这个词的含义是“...