VueJS2如何动态向父组件发出事件？

Question

就像标题我需要动态地向父组件的方法发出事件一样，我有一个像这样结构的组件

<TableComponent 
  :actionmenus="actionmenus"
  @edit="parenteditmethod"
  @delete="parentdeletemethod">
</TableComponent>

这是操作菜单对象

actionmenus: [
  {title: 'Edit', emitevent: 'edit'},
  {title: 'Delete', emitevent: 'delete'}
]

然后这是我的表格组件的片段

...
<ul>
  <li v-for="menu in actionmenus"><a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a></li>
</ul>
...

我知道这应该可以通过$emit('edit')或$emit('delete')不使用 actionmenus 对象轻松完成，但该$emit()部分应该基于传递的数组 actionmenus 是动态的，以便可以在不同的情况下重新使用 table 组件。我应该如何处理这个问题？有什么办法吗？

Answer 1

据我了解，您希望从子组件向父组件发出一个事件，并通过发出传递一些数据（抱歉，如果情况并非如此）。

如您所知，您可以在子组件中发出事件，如下所示：

$emit("EVENT");

并像这样在父级中捕获它：

<childTag v-on:EVENT="parentFunction"></childTag>

您还可以将数据从子级传递给父级，如下所示：

$emit("EVENT",DATA);

并像这样捕获父函数中的数据

<childTag v-on:EVENT="parentFunction"></childTag>
...
methods{
  parentFunction(DATA){
    //Handle the DATA object from the child
  }
}

希望这有帮助，祝你好运！