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

我想通过循环一系列组件来创建一些不同的组件，如我的示例中所示。但是我想为每个组件创建不同的事件处理程序。如何在componentData数组中定义它们并在循环时绑定它们

组件数据：[ {name:TestPane，props:{data:hello}，id:1}， {name:TestPane，props:{data:bye}，id:2}， ], ] 您可以使用v-on指令。让我们先了解Vue如何将事件侦听器绑定到组件：

当您向componnet添加@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>

您可以使用v-on指令。让我们先了解Vue如何将事件侦听器绑定到组件：

当您向componnet添加@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>

---

向数组中添加方法名称，如：

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

在模板中：

  <component ... @click.native="this[component.method]()">

如果事件是从组件发出的，则应添加它们的名称并动态绑定它们：

componentData: [
   { name: TestPane, props: { data: "hello" }, id: 1,event:'refresh', method:"method1" },
   { name: TestPane, props: { data: "bye" }, id: 2 ,event:'input',method:"method2"},
],

---

向数组中添加方法名称，如：

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

在模板中：

  <component ... @click.native="this[component.method]()">

如果事件是从组件发出的，则应添加它们的名称并动态绑定它们：

componentData: [
   { name: TestPane, props: { data: "hello" }, id: 1,event:'refresh', method:"method1" },
   { name: TestPane, props: { data: "bye" }, id: 2 ,event:'input',method:"method2"},
],

---

处理程序方法在哪里定义？在方法部分。我想做一些类似的事情：{name:TestPane，props:{data:hello}，id:1，@click:doSomething}，在方法部分中定义的处理程序方法在哪里。我想做一些类似的事情：{name:TestPane，props:{data:hello}，id:1，@click:doSomething}，@Kevin worth说Boussadjra-Brahim的答案也可以应用，因为使用这种方法，您无法监听本机事件。只有您的子组件发出的事件我添加了一个使用从子组件发出的自定义事件的示例这两个解决方案现在对我都有效，多亏了你们。我还有一个小问题。。normale我可以将道具写成：data=this.message。现在，我使用props:{data:this.message}来完成它。但是现在这个.message总是未定义的，虽然我在数据部分定义了它，但您可能正在数据部分访问它，不是吗？类似于data:=>{data:{message:this.message}，message:'Hello'}。这将失败，因为This.message不知道该消息已经是什么。您可以使用计算出的property@Kevin值得一提的是，Boussadjra Brahim的答案也可以应用，因为用这种方法你不能听本地事件。只有您的子组件发出的事件我添加了一个使用从子组件发出的自定义事件的示例这两个解决方案现在对我都有效，多亏了你们。我还有一个小问题。。normale我可以将道具写成：data=this.message。现在，我使用props:{data:this.message}来完成它。但是现在这个.message总是未定义的，虽然我在数据部分定义了它，但您可能正在数据部分访问它，不是吗？类似于data:=>{data:{message:this.message}，message:'Hello'}。这将失败，因为This.message不知道该消息已经是什么。您可以通过使用computed propertyWorth来解决这个问题，即动态事件名称仅在。。。我正在试图找到版本，但我也无法获取vue 2版本，以了解动态事件名称仅在。。。我正试图找到版本，但我也无法从VUE2版本中看到这一点

<component ... @[component.event]="handler(component.method)">