vue多个相同子组件_Vue父子组件,利用条件延迟创建子组件,达到参数传递目的...

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

dc54551713462b60813fec4daaf956cf.png

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

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

cca646ec2354edb9c012609845c579a5.png

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值