如何判断所有的子组件加载完成
2017-12-31 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
向TA提问 私信TA
知道合伙人数码行家
采纳数:117538
获赞数:517163
长期从事计算机组装,维护,网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
展开全部
在父子组件的配合使用中,尤其是配置信息与业务信息相分离的情况下,我们经常需要在所有的子组件加载完成后,再执行父组件的相关服务,以如下的组件结构为例:
<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> 123456
在上面的例子中,我们需要组合子组件的配置信息,因此,只有所有的子组件加载完成,组合的配置信息才能准确完整。
所以,如果直接用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) { // 这时候所有的子组件已加载完成
}
}
}123456789101112131415161718192021222324252627
通过设置配置项“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> 12345
经过这样的处理,我们可以在所有子组件加载完成对其进行排序,如下:
// 由于Vue无法确定子元素的加载顺序,必须手动指定orderthis.colModel.sort((a, b) => a.order - b.order)12
结论
通过手动添加辅助变量与方法,可以获取子组件加载完成的时刻,从而执行整合性操作。
<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> 123456
在上面的例子中,我们需要组合子组件的配置信息,因此,只有所有的子组件加载完成,组合的配置信息才能准确完整。
所以,如果直接用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) { // 这时候所有的子组件已加载完成
}
}
}123456789101112131415161718192021222324252627
通过设置配置项“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> 12345
经过这样的处理,我们可以在所有子组件加载完成对其进行排序,如下:
// 由于Vue无法确定子元素的加载顺序,必须手动指定orderthis.colModel.sort((a, b) => a.order - b.order)12
结论
通过手动添加辅助变量与方法,可以获取子组件加载完成的时刻,从而执行整合性操作。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询