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