浅谈Vue的加载顺序探讨(2)

日期：2020-05-11 栏目：程序人生 浏览：次

通过设置配置项“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>

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

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

结论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。