vue 关于子组件向父组件传值$emit触发无效问题

时间: 2019-08-07阅读: 27标签: 组件

子组件代码

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

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


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/6312

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

BEM举例

一个组件可能有不同状态。状态应该使用修饰符类来实现。不要单独使用修饰符。修饰符的作用是增加而不是替换基类。更复杂的组件含有子元素。在某些情况下,您可能希望更改组件中的单个元素。

让你的组件千变万化,Vue slot 剖玄析微

Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么

Vue组件库搭建实践与探索

在以前传统的前端页面开发方式时,存在协同困难,可复用性差的问题,导致开发和维护都不是一件简单的事。而组件化思想的提出,以及Vue、React等MV*框架的快速流行,让我们开始尝试用组件化的思想去开发

Vue动态加载组件

使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

Vue组件、自定义属性、自定义事件

一个vue文件就是一个组件。组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。自定义属性、使用自定义属性

30行代码实现一个进度条组件

30行js和30行css实现一个进度条组件,关键在于运用css变量;传入percent,生成进度条、进度条进度控制、进度条背景颜色

在 Vue.js 中使用无状态组件

在本文中,你将了解功能组件,并了解如何在 Vue 中使用工作流中的无状态组件。你的PC需要以下内容:安装 Node.js version 10.x 或以上版本。可以通过在终端中运行以下命令来验证你是否安装了此版本的Node.js:

Node.js之react.js组件-Props应用

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面),具有 render prop 的组件接受一个函数

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全