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

当你把一个@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') }
} 
}

Answer 2

将方法名添加到数组中，如：

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]()">

或者添加另一个名为handler的方法，该方法运行适当的组件方法：

<component ... @click.native="handler(component.method)">

methods:{
handler(methodName){
this[methodName]();
}
...
}

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

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

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