Vue子组件向父组件传值this.$emit

举报
别团等shy哥发育 发表于 2023/01/09 09:11:57 2023/01/09
【摘要】 @toc 1、问题描述  今天碰到了个问题,我有个属性分组的页面,该页面中引入两个子组件,一个是左侧的属性菜单子组件,另一个是新增按钮的对话框组件。右侧为一个表格,显示左边树形菜单中三级分类的所有商品。  但是通过新增按钮添加商品之后,右侧的表格并不会刷新显示最新的数据。  我们的目的是子组件中表单提交之后通知父组件刷新表格中的数据。 2、解决方案:this.$emit()方法  子组件某些...

@toc

1、问题描述

  今天碰到了个问题,我有个属性分组的页面,该页面中引入两个子组件,一个是左侧的属性菜单子组件,另一个是新增按钮的对话框组件。右侧为一个表格,显示左边树形菜单中三级分类的所有商品。
  但是通过新增按钮添加商品之后,右侧的表格并不会刷新显示最新的数据。
在这里插入图片描述
在这里插入图片描述
  我们的目的是子组件中表单提交之后通知父组件刷新表格中的数据。

2、解决方案:this.$emit()方法

  子组件某些功能想要与父组件通信,可以让子组件使用this.$emit()方法触发事件,父组件使用v-on指令监听子组件的自定义事件。
  $emit()方法的语法形式如下:

$emit({string} eventName,[...args])

  eventName为事件名,args为附加参数,这些参数会传给事件监听器的回调函数。如果子组件需要向父组件传递数据,就可以使用第二个参数。

  对于我这个案例来说,子组件需要在对话框中执行表单的提交按钮之后,通知父组件刷新表格中的数据。
  在子组件中触发事件通知父组件刷新数据:
  attrgroup-add-or-update.vue
在这里插入图片描述
  父组件使用v-on指令监听子组件提交的refreshDataList事件(事件名字是自定义的):
  attrgroup.vue
在这里插入图片描述

@refreshDataList这种形式是v-on指令的简写语法,@后面跟的值就是我们子组件中的自定义事件。

在这里插入图片描述
  这样就实现了在子组件发生表单提交事件的时候,父组件也能执行刷新表格数据的请求,让前端显示的数据一直是最新的。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。