vue 关于子组件向父组件传值$emit触发无效问题


先贴上代码

子组件代码

 1 //子组件请求接口,用自己封装的axios
 2  getupdate(){  3          this.$post({  4            url:this.$apis.unitupdate,  5            postType:'json'
 6  })  7          .then( () => {  8           this.$emit("getlist")//成功之后触发更新列表 
 9  }) 10  }, 11  this.close()  //关掉弹窗

父组件代码

//父组件
//在父组件中插入子组件弹窗 getlist是在子组件触发的事件

<Dialogedit v-if="showdialog" @getlist="getList"> </Dialogedit>
<script>

//请求列表

method:{
getList(){ this.$get({ url:this.$apis.drugunit, query:this.params }) .then( res => { this.mainList = res.data.list }) },
}
</script>

这样做就会出现一个问题 就是在子组件中,this.$emit触发不了或者延迟

原因是在触发this.$emit请求返回需要时间,而在请求过程(因为是异步所以会先执行下面的操作),调用了this.close(this.close是定义好的方法)将弹窗关闭,所以导致this.$emit不能返回

只要把this.close放到then里面就可以了就是请求成功才关闭窗口

 getupdate(){ this.$post({ url:this.$apis.unitupdate, param:this.formModel, postType:'json' }) .then( () => { this.$emit("getlist") this.close() 
})

这样就会在关闭窗口前更新列表


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM