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()
})
这样就会在关闭窗口前更新列表
vue 关于子组件向父组件传值$emit触发无效问题的更多相关文章
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue.js(18)--父组件向子组件传值
子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的 ...
- vue.js父组件引入子组件,父组件向子组件传值
先看看目录结构app.vue为父组件,components里面的文件为子组件 下面这张图是父组件app.vue中的内容 下面这张图是子组件student.vue中的内容 这样父组件中的sdt数据就传入 ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
随机推荐
- Http项目转Https项目
Https证书准备 开发环境下,可直接用JDK自带的keytool工具生成一个证书,正式环境可购买一个,配置过程是一样的: 打开cmd命令行,输入以下命令: 命令解释: -alias 证书别名 -ke ...
- 第2课第4节_Java面向对象编程_多态性_P【学习笔记】
摘要:韦东山android视频学习笔记 面向对象程序的三大特性之继承性: 1.向上转换:只能定义被子类覆写的方法,不能调用在子类中定义的方法. class Father { private int ...
- dubbo架构角色
角色 Dubbo有5个参与者:其中Monitor.Registry不是必须的 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方(负载均衡) Registry 服务注册 ...
- 缓存:修改Hosts不生效
修改Hosts为何不生效,是DNS缓存? - Barret李靖 - 博客园https://www.cnblogs.com/hustskyking/p/hosts-modify.html 换个未打开过的 ...
- nfs高可用
一.简介 NFS是单点的,如果一个节点出现问题,那使用它挂载服务的都将出现问题.所以需要高可用,挂掉一台不影响.采用keepalived+rsync+inotify-tools 环境: ubunt ...
- ISO/IEC 9899:2011 条款6.10——预处理指示符
6.10 预处理指示符 语法 1.preprocessing-file: groupopt group: group-part group group-part group-part: if-s ...
- OpenStack Neutron单网卡桥接模式访问外网
环境配置: * Exsi一台 * Exsi创建的单网卡虚拟机一台 * Ubuntu 14LTS 64位操作系统 * OpenStack Liberty版本 * 使用Neutron网络而非Nova网络 ...
- jQuery fancy box 移除close "X" button
version: fancybox 2.1.4 <div id="reloadPagePopup" class="div-fancy-box"> & ...
- [LeetCode] 236. Lowest Common Ancestor of a Binary Tree 二叉树的最近公共祖先
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- icheck判断是否选中
icheck判断是否选中 1 $("#id").on('ifChanged', function () { 2 if ($(this).is(':checked')) {//就 ...