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

【问题标题】：VueJS2 how to dynamically emit event to parent component?VueJS2如何动态向父组件发出事件？
【发布时间】：2017-05-03 04:17:24
【问题描述】：

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

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

这里是操作菜单对象

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

然后这是我的 tablecomponent 的 sn-p

...
<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 是动态的，以便表格组件可以在不同的情况下重复使用。我应该如何解决这个问题？有什么办法吗？

【问题讨论】：

您的代码有效，有什么问题？
@CodinCat 事件未发出。我想知道@click="$emit(menu.emitevent)" 真的是传递变量以发出函数的正确方法。
它确实有效，请参见示例：codepen.io/CodinCat/pen/eWRoeb
你是对的，我看到我的错误在我的 css 文件中。通过对元素使用焦点来显示 ul 元素可见性的父级，当我尝试单击链接时，父元素焦点丢失并且 ul 元素可见性在处理单击事件之前被隐藏。我通过在可见性转换中使用延迟来解决这个问题。我希望我的解释足够清楚，以便与我有同样问题的每个人都能理解。

标签： javascript html vuejs2

【解决方案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
  }
}

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

【讨论】：

是的！这正是我想要做的。但不知何故，正如我在上面的评论中所描述的那样，事件没有发送给父级。您的答案显示了如何在 vuejs 中准确地向父组件发出事件。也许我应该接受这个作为答案，以便人们因为我的问题标题而导航到这里。
此解决方案假设您知道事件的名称？动态捕获事件并将其发送给父级呢？

【解决方案2】：

@codincat 是对的，一切正常。 Vue3 也是如此

const rootComponent = {
  el: "#app",
  data: function () {
    return {
      actionmenus: [
        { title: "Edit", emitevent: "edit" },
        { title: "Delete", emitevent: "delete" }
      ]
    };
  },
  methods: {
    parenteditmethod() {
      console.log("edit");
    },
    parentdeletemethod() {
      console.log("delete");
    }
  }
};

const app = Vue.createApp(rootComponent);
app.component("table-component", {
  props: { actionmenus: Array },
  template: `
    <ul>
      <li v-for="menu in actionmenus">
        <a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a>
      </li>
    </ul>`
});

const rootComponentInstance = app.mount("#app");

<!-- https://stackoverflow.com/questions/43750969/vuejs2-how-to-dynamically-emit-event-to-parent-component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.min.js"></script>

<div id="app">
  <table-component :actionmenus="actionmenus" @edit="parenteditmethod" @delete="parentdeletemethod">
  </table-component>
</div>

【讨论】：