zoukankan      html  css  js  c++  java
  • 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() 
    })

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

  • 相关阅读:
    async/await语法
    generator生成器函数
    数组练习
    解决异步(重点promise函数)
    iterator遍历器
    各种遍历方法(重点for....of)
    ES6代理proxy
    Symbol新数据类型
    函数(rest 箭头)
    ES6常用方法(字符串,数字,数组,对象)
  • 原文地址:https://www.cnblogs.com/wazy999/p/11804115.html
Copyright © 2011-2022 走看看