动态组件列表上的@click事件

Question

当组件的v-for列表中有一个@click事件时，我很难让click事件发出或被Vue捕获。

我有动态组件，可以包含一系列其他组件，并带有如下所示的v-for循环：

<component v-for="(component, index) in components"
        v-bind:is="component"
        v-bind:key="index"
        @click="sayHi()">
</component>

组件数据如下：

data() {
    components: ['Foo', 'Bar'];
}

该方法只是同一顶级组件上的sayHi() { alert('hi') }（方法不在子Foo或Bar上）。

但是似乎从未调用过该方法？我尝试了很多不同的方法和实现，但是无法触发该方法。

感谢您的帮助！

Answer 1

如果要将本机事件侦听器附加到自定义组件，则需要在事件侦听器中添加native修饰符。

   @click.native="sayHi()"