先贴上代码

子组件代码

 //子组件请求接口,用自己封装的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()
})

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

vue 关于子组件向父组件传值$emit触发无效问题的更多相关文章

  1. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  2. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  3. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  4. vue.js(18)--父组件向子组件传值

    子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的 ...

  5. vue.js父组件引入子组件,父组件向子组件传值

    先看看目录结构app.vue为父组件,components里面的文件为子组件 下面这张图是父组件app.vue中的内容 下面这张图是子组件student.vue中的内容 这样父组件中的sdt数据就传入 ...

  6. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  9. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  10. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

随机推荐

  1. 为什么GPU不能代替CPU?

    gpu就是并行处理强大, cpu很多功能gpu都没有. 什么指令流水化, 多进程管理之类的. gpu没有多少自主处理指令的能力, 基本是指令靠cpu 计算靠gpu.GPU工作原理是cpu 处理指令,遇 ...

  2. Sparrow-WiFi:一款Linux平台下的图形化WiFi及蓝牙分析工具

    工具概述 Sparrow-wifi本质上一款针对下一代2.4GHz和5GHz的WiFi频谱感知工具,它不仅提供了GUI图形化用户界面,而且功能更加全面,可以代替类似inSSIDer和linssid之类 ...

  3. Linux Shell 之 对文件中的行、单词、字符进行迭代

    在进行文本文件进行处理时,对文件件中的行.单词.字符进行迭代和遍历是非常常用的操作.而将一个简单的循环用于迭代,再加上来自stdin或文件的重定向,这就是对文件中的行.单词.和字符进行迭代的基本方法. ...

  4. .sql文件l通过PLSQL导入到Oracle数据库

    最近从第三方共享到一个数据,对方提供的是.sql文件.如何导入Oracle数据库? 开始想通过navicat for mysql工具--运行SQL文件来导入表---总是出现错误,失败. 后来还是用回P ...

  5. 在本地搭建hyperledger fabric 网络

    参考了官方文档,直接就可以了https://hyperledger-fabric.readthedocs.io/en/latest/build_network.html 很好用 ➜ ~ cd $GOP ...

  6. Qt QSplitter任意拆分窗口

    Qt拆分窗口可以使用QSplitter,也可以使用比较容易使用布局控件来完成,本文章给出使用QSplitter分割窗口的例子. QSplitter 继承自QFrame,而QFrame又继承自QWidg ...

  7. [LeetCode] 535. Encode and Decode TinyURL 编码和解码短网址

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  8. 最新 北森java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.北森等10家互联网公司的校招Offer,因为某些自身原因最终选择了北森.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. PHP阿里大于发短信教程

    PHP阿里大于发短信教程 1 先去控制台 https://www.alidayu.com/center/user/account?spm=a3142.7791109.1999204004.5.ZtBQ ...

  10. 微服务架构下使用Spring Cloud Zuul作为网关将多个微服务整合到一个Swagger服务上

    注意: 如果你正在研究微服务,那必然少不了服务之间的相互调用,哪么服务之间的接口以及api就必须生成系统的管理文档了.如果你希望更好的管理你的API,你希望有一个工具能一站式地解决API相关的所有事情 ...