Why v-on:click does not work on a vue component?

在 Vue.js 中，v-on 指令用于监听 DOM 事件，例如用户的点击事件。当您在原生 HTML 元素上使用 v-on:click 或者是缩写形式 @click，它会正常工作，因为这会在该元素上绑定一个点击事件监听器。但是，当您将同样的指令用在一个 Vue 组件上时，情况就有所不同。

组件上的 v-on 监听器并不是直接监听子组件根元素的原生事件，而是监听由子组件触发的自定义事件。Vue 组件实例不会自动将它们的事件监听器作为原生 DOM 事件处理程序。这是因为组件的根元素可以是任何元素或者其他组件，Vue 不会对它做特殊处理。

如果你要在组件上监听一个原生事件（比如点击事件），你需要使用 .native 修饰符，指示 v-on 监听原生事件，如下所示：

vue
<!-- MyComponent.vue -->
<template>
  <button @click="$emit('click')">Click me</button>
</template>
<script>
export default {
  emits: ['click']
};
</script>

vue
<!-- ParentComponent.vue -->
<template>
  <my-component @click.native="handleClick"></my-component>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

在这个例子中，我们有一个子组件 MyComponent，它在一个按钮上监听点击事件，并在点击时触发一个名为 click 的自定义事件。在父组件中，我们使用 .native 修饰符来监听这个原生的点击事件。但是要注意的是，从 Vue 3 开始，.native 修饰符已被移除，因为 Vue 3 提倡组件应该显式地定义和触发它们自己的自定义事件。

因此，在 Vue 3 中，您应该在子组件中通过 $emit 来显式地发出自定义事件，并在父组件中监听这些事件而不是原生事件。如果你确实需要在父组件中监听子组件根元素的原生事件，你应该在子组件内部绑定一个原生事件监听器，并在需要时触发一个自定义事件。