在父子组件的配合使用中，尤其是配置信息与业务信息相分离的情况下，我们经常需要在所有的子组件加载完成后，再执行父组件的相关服务，以如下的组件结构为例：

 <jq-grid :url="url" col-size="5" :sub-grid="true" ref="accountGrid" :on-ready="initGrid" :query="queryParams">   <jq-col label="账号" name="username" width="75" :sortable="true"></jq-col>   <jq-col label="用户名称" name="remarkName" width="75" :sortable="true"></jq-col>   <jq-col label="创建时间" name="createTime" width="90">   </jq-col></jq-grid>           
  
  
1
2
3
4
5
6

在上面的例子中，我们需要组合子组件的配置信息，因此，只有所有的子组件加载完成，组合的配置信息才能准确完整。

所以，如果直接用mounted事件（1.0中为ready事件），则一定得到不正确的结果，为了解决此问题，我们不妨生命如下的数据结构与方法：

props : {    colSize : {        type : Number,        default : 1    }}data () {    return {        //  用于获取所有的子组件配置信息        colModel : [],        readySize : 0    }},methods : {    /**     *  由子组件在加载完成时调用     */    addColModel () {         this.readySize ++         // 检查进度是否设置的colSize一致         if(this.readySize == this.colSize) {            //  这时候所有的子组件已加载完成         }     }}
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

通过设置配置项“colSize”与检查子组件调用的方法“addColModel”，我们可确定所有子组件加载完成的时刻（此时父组件有可能加载完成，也可能未加载完成），从而进行必要的配置信息整理操作。

但是在实际应用中，我们发现，如果子组件的数量较多时，会发生另外一种现象，子组件加载顺序会随机发生，如果要保证加载顺序与配置顺序一致，我们可以在子组件中加入“order”属性，如下，最新配置内容如下：

<jq-grid :url="url" col-size="8" :sub-grid="true" ref="hostGrid" :on-ready="initGrid" :query="queryParams">    <jq-col order="1" label="名称" name="hostName" width="75" :sortable="true" ></jq-col>    <jq-col order="2" label="主机型号" name="model" width="60" :sortable="true"></jq-col>    <jq-col order="3" label="生产厂商" name="vendor" width="60" :sortable="true"></jq-col></jqgrid>            
  
  
1
2
3
4
5

经过这样的处理，我们可以在所有子组件加载完成对其进行排序，如下：

//  由于Vue无法确定子元素的加载顺序，必须手动指定orderthis.colModel.sort((a, b) => a.order - b.order)
  
  
1
2

结论

通过手动添加辅助变量与方法，可以获取子组件加载完成的时刻，从而执行整合性操作。