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

子组件代码

//子组件请求接口，用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'json' }) .then( () => { this.$emit("getlist")//成功之后触发更新列表 }) }, 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>

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

这样做就会出现一个问题 就是在子组件中，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() })

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