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 >

Answer 3

您可以将单击处理程序作为prop传递给子组件，例如：

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

// Component
<template>
  <button @click="onClick">Click me</button>
</template>
<script>
  export default {
    props: ['onClick']
  }
</script>

Answer 4

我猜你正在尝试做的事情是不需要或不正确的。如果要在单击子组件时调用父项中定义的函数，则只需将组件包装在元素中并将事件绑定到该包装器即可。这样，无论何时单击在其中呈现的任何组件，并且您没有直接绑定到组件的事件，该函数都将触发

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

应该这样做。

Vue中的动态组件单击事件

4 个答案: