如果你想监听组件根元素上的本机事件，你必须使用.native修饰符来代替v-on，如下所示:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

或者用简写的方式，正如评论中建议的那样，你也可以这样做:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

参考阅读有关本机事件的更多信息

这是@Neps的答案，但有细节。

注意:如果你不想修改你的组件或者没有权限访问它，@Saurabh的答案更适合。

为什么@click不能正常工作?

组件是复杂的。一个组件可以是一个漂亮的小按钮包装器，另一个组件可以是一个包含大量逻辑的完整表。当绑定v-model或使用v-on时，Vue不知道你到底期望什么，所以所有这些都应该由组件的创建者处理。

如何处理点击事件

根据Vue文档，$emit将事件传递给父节点。来自docs的例子:

主文件

<blog-post
  @enlarge-text="onEnlargeText"
/>

组件

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

(@是v-on的缩写)

组件处理本机单击事件并发出父元素的@enlarge-text="…"

放大文本可以替换为点击，使它看起来像我们在处理一个本地点击事件:

<blog-post
  @click="onEnlargeText"
></blog-post>

<button @click="$emit('click')">
  Enlarge text
</button>

但这还不是全部。$emit允许将特定值与事件一起传递。在本机单击的情况下，值为MouseEvent(与Vue无关的JS事件)。

Vue将该事件存储在$event变量中。因此，最好在一个事件中发出$event，以创建本机事件使用的印象:

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>

如果你想监听组件根元素上的本机事件，你必须使用.native修饰符来代替v-on，如下所示:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

或者用简写的方式，正如评论中建议的那样，你也可以这样做:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

参考阅读有关本机事件的更多信息

我认为$emit函数更适合你的要求。它将组件与Vue实例分离，以便在许多上下文中可重用。

// Child component
<template>
  <div id="app">
    <test @click="$emit('test-click')"></test>
  </div>
</template>

在HTML中使用

// Parent component
<test @test-click="testFunction">

使用@click的一个用例。本机是当您创建自定义组件并希望侦听自定义组件上的单击事件时。例如:

#CustomComponent.vue
<div>
  <span>This is a custom component</span>
</div>

#App.vue
<custom-component @click.native="onClick"></custom-component>

@click。当地人总是在这种情况下工作。

组件的本机事件不能直接从父元素访问。相反，你应该尝试v-on:点击。native="testFunction"，或者你也可以从Test组件发出一个事件。像v:点击= " $发出(点击)”。