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

Question

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

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 如何将事件监听器绑定到组件：

当您将 a 添加@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') }
  } 
}