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

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

  • 相关阅读:
    SQL Server 2005 全文搜索包括改进和更新的干扰词文件FROM MS KB
    服务器内存选项From MS
    跳过事务复制中的错误
    WP7基础补充
    TaoBaoAPI简介3
    登录功能代码
    TaoBaoApI简介1
    TaoBaoAPI简介2
    WP7基础学习第十三讲
    WP7基础学习第十四讲
  • 原文地址:https://www.cnblogs.com/wazy999/p/11804115.html
Copyright © 2020-2023  润新知