在Vue3的文档中，有一句话不是很懂，也没有具体的例子来解释

Question

https://vuejs.org/guide/components/events.html#declaring-emitted-events

如果在 emits 选项中定义了原生事件（例如，点击），监听器现在将只监听组件发出的点击事件，不再响应原生点击事件。

Declaring Emitted Events部分，这句话没看懂。能否请您举个具体的例子来说明一下？

这个问题困扰我很久了，找不到具体的demo

Answer 1

这将覆盖您组件的本机点击事件。

例如，对于基本的 HTML 组件：

<div>
  <button>test</button>
</div>
<script>
  button.addEventListener('click', event => {
    button.innerHTML = `Clics number : ${event.detail}`;
  });
</script>

通常这种事件会传播到dom，并且可以被父组件拦截，例如：

const body = document.querySelector('body')

body.on('click', function(event){
  event.preventDefault();
  // your code to handle the clicks
});

但是如果你用 vue emit 覆盖这个方法，这将不再有效：

export default defineComponent({
  emit: ['click'],
})

点击的范围现在只在组件级别。捕获它的唯一方法是在使用组件时指定它：

<my-component @click="myfunction" />

希望更清楚