天天看點

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>      

這樣做就會出現一個問題 就是在子元件中,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() 
 })      

這樣就會在關閉視窗前更新清單