javascript - Vue - 在动态组件数组中定义事件处理程序

Question

我想通过循环访问我的示例中的组件数组来创建一些不同的组件。但我想为每个组件创建不同的事件处理程序。如何在我的 componentData 数组中定义它们并在循环时绑定(bind)它们？

componentData: [
   { name: TestPane, props: { data: "hello" }, id: 1 },
   { name: TestPane, props: { data: "bye" }, id: 2 },
],
]

<div v-for="component in componentData" :key="component.id">
   <component v-bind:is="component.name" v-bind="component.props">
   </component>
</div>

Answer 1

您可以使用 v-on指示。让我们先了解一下 Vue 是如何将你的事件监听器绑定(bind)到组件的:
当您添加 @input对于组件，您实际上在做的是 v-on:input .您是否注意到 v-on在那边？这意味着您实际上是在将“监听器对象”传递给组件。
为什么不一口气通过所有这些？

<template>
  <section>
    <div v-for="component in componentData" :key="component.id">
      <component v-bind:is="component.name" v-bind="component.props" v-on="component.on">
    </component>
</div>
  </section>
</template>

<script>
export default {
  data: () => ({
    componentData: [
      { name: TestPane, props: { data: "hello" }, id: 1, on: { input: (e) => { console.log(e) } } },
      { name: TestPane, props: { data: "bye" }, id: 2, on: { input: (e) => { console.log(e); } } },
    ],
  })
}
</script>

正如你可能猜到的，你现在可以在 on 中收听事件。目的。如果您愿意，还可以添加更多:

{ 
  name: TestPane,
  props: { data: "hello" },
  id: 1,
  on: { 
    input: (e) => { console.log(e) },
    hover: (e) => { console.log('This component was hovered') }
  } 
}