Vue中的动态组件点击事件

Question

我使用v-for以下方式渲染Vue组件：

<component
    v-for="component in components"
    :is="component.type"
    @click="myFunction(component.id)">
</component>

单击呈现的组件不会触发该myFunction方法。但是，单击手动插入的组件可以：

<div @click="myFunction('...')"></div>

如何纠正呢？

Answer 1

添加.native修饰符以侦听本机事件，而不是组件事件。

<component
    v-for="component in components"
    :is="component.type"
    @click.native="myFunction(component.id)">
</component>

资料来源：https : //vuejs.org/v2/api/#v-on

Answer 2

尝试以下操作：

<template v-for="component in components">
  <component :is="component.type" @click="myFunction(component.id)" />
</template >