vue 关于子组件向父组件传值$emit触发无效问题
程序员文章站
2022-06-23 22:44:51
先贴上代码 子组件代码 1 //子组件请求接口,用自己封装的axios 2 getupdate(){ 3 this.$post({ 4 url:this.$apis.unitupdate, 5 postType:'json' 6 }) 7 .then( () => { 8 this.$emit("g ......
先贴上代码
子组件代码
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()
})
这样就会在关闭窗口前更新列表
下一篇: 分布式事务之解决方案(最大努力通知)