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

這樣就會在關閉窗口前更新列表