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

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

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

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

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

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

<el-tab-pane label="表单信息">
<generate-form v-if=" widgetForm.config !==undefined" >
</generate-form>
</el-tab-pane>
<el-tab-pane label="流程图">
</el-tab-pane>

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