Vue父子组件,利用条件延迟创建子组件,达到参数传递目的
利用Vue开发页面过程当中, 页面组件化是必备的技巧之一。但是由于各种原因,子组件的数据需要来源于父页面加载完之后,父页面才能把参数传给子页面,例如,我们常见的一个工作流审批页面:
表单数据项的展现,是根据工作流的ID,动态展现出来的,也就是说,当父组件的组件生命周期执行完,子组件才会获得对应的数据。如果不加任何限制,子组件生命周期是和父组件一起完成的。
一个完整的Vue组件生命周期如下图所示:
在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段。即子组件的生命周期是在父组件的beforeMount阶段完成的。父组件的很多数据的加载,是在create()阶段完成的,虽然子组件的加载是在父组件的create()事件之后,但是我们的create()再次调用Ajax加载数据时,此时是异步的,子组件并不会等父组件的create()事件当中ajax全部加载完,再执行子组件的生命周期,这时,我们在父组件create()方法中获得的后台数据,是不会传入到子组件当中去的。在这种情况下该怎么办呢?
这时我们可以推迟子组件的加载,即利用Vue 的v-if 有条件加载组组间,例如,我们可以设置一个参数,当这个参数有值的时候,我们再加载子组件。回到上面那个例子:
我们设置当widgetForm.config !==undefined时,再加载子组件,此时我们在父组件的create()方法中加载widgetForm后台数据即可。