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

Question

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

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

这里是actionmenus对象

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

然后这是我的tablecomponent的片段

...
<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，以便tablecomponent可以重新 - 用于不同的案例。我该怎么接近这个？有什么办法吗？

Answer 1

根据我的理解，您希望从子组件向父组件发出一个事件，并使用emit传递一些数据（对不起，如果不是这样的话）。

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

$emit("EVENT");

然后像这样抓住父母：

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

您也可以将数据传递给孩子的父母，如下所示：

$emit("EVENT",DATA);

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

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

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