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

2022-10-13,,,,

先贴上代码

组件代码

 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() 
})

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

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

下载本文的Word格式文档,以方便收藏与打印。