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

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

• 1、问题描述
• 2、解决方案：`this.$emit()`方法

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指令的简写语法,@后面跟的值就是我们子组件中的自定义事件。

在这里插入图片描述

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