先贴上代码

子组件代码

 //子组件请求接口,用自己封装的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. Windows安装Python3 curses模块

    目录 0.前提 1.pip install wheel 2.下载.whl文件 3.pip install 它 参考 0.前提 确定你已经配置好了Python相关环境,可以正常在命令行使用pip安装. ...

  2. Vue简单归纳

    目录 Vue.JS Vue.JS介绍 概述 MVVM模式 示例图 快速入门 事件绑定 什么是事件 单击事件绑定 键盘事件 按键修饰符 鼠标事件 事件修饰符 数据绑定 插值 v-text v-bind ...

  3. 2019_软工实践_Beta(2/5)

    队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ?按照时间进度的安排进行相应的检查 展示GitHub当日代码/文档签入记 ...

  4. 解读 | 你真正理解什么是Cloud Native吗?

    你能做到每周.每天甚至每个钟头向客户发布新特性吗?新加入的开发者能够在他们工作的第一天甚至面试阶段就能部署代码吗?部署新员工的代码后,你能因为确信应用程序运行正常而安然入睡吗?建立快速发布机制,包括支 ...

  5. B2C电子商务系统研发——商品SKU分析和设计(一)

    一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...

  6. Android 属性property_get/property_set

    每个属性都有一个名称和值,他们都是字符串格式.属性被大量使用在Android系统中,用来记录系统设置或进程之间的信息交换.属性是在整个系统中全局可见的.每个进程可以get/set属性. 在系统初始化时 ...

  7. kafka发送超大消息设置

    最近开发一cdc框架,为了测试极端情况,需要kafka传递100万条数据过去,1个G左右,由于其他环节限制,不便进行拆包(注:测下来,大包走kafka不一定性能更好,甚至可能更低). 测试百万以上的变 ...

  8. matlab学习笔记10_5 通用字符串操作和比较函数

    一起来学matlab-matlab学习笔记10 10_5 通用字符串操作和比较函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张 ...

  9. matlab学习笔记10_4MATLAB中的字符串表示

    一起来学matlab-字符串操作 10_4 MATLAB中的字符串表示 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感 ...

  10. Python中request的post请求报requests.exceptions.SSLError:

    今天发送一个post请求,提示错误 requests.exceptions.SSLError: HTTPSConnectionPool(host='user.zaful.com', port=443) ...