这一次通过$emit实现子组件调用父组件的方法时,发现失效,耗了一个多小时,现在记录一下:
错误代码:
父组件
<pointDetail ref="pointDetail" v-if="pointDetailVisible" @set-hytabs="setHyTabs"
@point-detail-close="pointDetailClose" @handle-clear="handleClear" @load-circle="loadCircle" @pass-listquery2tmp="passListQuery2Tmp"/>
其中handleClear方法将子组件关闭
handleClear(){ ...this.pointDetailVisible = false; ... },
子组件
pointQuery(isPrice) { ... this.$emit('handle-clear'); ... gisDataQuery.getPointListNew(this.listQuery2).then((response) => {if (response.data) { ... that.$emit('set-hytabs',[]) let hyTabs = [] this.listQuery2.typeCode.forEach(code => { this.unitTypeOptions1.forEach(item => { if(item.itemCode == code){ hyTabs.push(item.itemName); } }); }); that.$emit('set-hytabs',hyTabs) this.loadData(pointList,[],centerPoint); if(pointList.length > 0){ that.$emit('pass-listquery2tmp',this.listQuery2) that.$emit('load-circle'); } } else { this.$message.warning("查询失败"); } }).catch((error) => { console.log(error); }); },
发现子组件的pointQuery方法调用后台接口后,4个that.$emit都失效。
通过百度发现一篇文章:
才发现在handleClear方法中将子组件关闭,导致事件被销毁。
解决办法:父组件handleClear方法中不关闭子组件,子组件执行所有that.$emit后关闭子组件。
handleClear(){ ... // this.pointDetailVisible = false; ... },
子组件最后再关闭子组件。
pointQuery(isPrice) { ... this.$emit('handle-clear'); ... gisDataQuery.getPointListNew(this.listQuery2).then((response) => { ... that.$emit('set-hytabs',[]) let hyTabs = [] this.listQuery2.typeCode.forEach(code => { this.unitTypeOptions1.forEach(item => { if(item.itemCode == code){ hyTabs.push(item.itemName); } }); }); that.$emit('set-hytabs',hyTabs) this.loadData(pointList,[],centerPoint); if(pointList.length > 0){ that.$emit('pass-listquery2tmp',this.listQuery2) that.$emit('load-circle'); } } else { this.$message.warning("查询失败"); } that.$emit('point-detail-close') }).catch((error) => { console.log(error); }); },