Vue子组件向父组件传递click事件时无法使用stop修饰符，求解决

一、修复click.stop修饰符报错问题 #

报错原因是子组件触发click事件时未传递原生事件对象，导致Vue无法调用事件对象的stopPropagation方法。

修改子组件，在$emit时传入原生事件对象$event：

<!-- ButtonComponent -->
<template>
  <button @click="$emit('click', $event)">Click Me</button>
</template>

<script setup>
</script>

此时父组件使用@click.stop="doSomething()"即可正常生效，修饰符能正确调用事件对象的方法。

二、自动转发所有事件到父组件（无需手动$emit） #

Vue 3提供两种简洁方式实现自动事件转发：

方式1：利用原生根元素的自动属性继承 #

如果子组件的根元素是原生DOM元素（如本例的<button>），Vue默认会将父组件传递的所有非Props属性、事件自动绑定到根元素上，无需手动编写$emit。直接简化子组件：

<!-- ButtonComponent -->
<template>
  <button>Click Me</button>
</template>

<script setup>
</script>

父组件的@click、@click.stop等带修饰符的事件会直接作用于根<button>，完全无需手动处理事件转发。

方式2：使用v-on="$attrs"手动转发（适用于非原生根元素场景） #

如果子组件根元素不是原生元素（如自定义组件、嵌套容器），可通过v-on="$attrs"将所有父组件传递的事件绑定到目标元素上，并关闭根元素的自动属性继承：

<!-- ButtonComponent -->
<template>
  <div class="button-wrapper">
    <!-- 将所有父组件事件转发到button上 -->
    <button v-on="$attrs">Click Me</button>
  </div>
</template>

<script setup>
// 阻止根div继承父组件传递的非Props属性
defineOptions({
  inheritAttrs: false
})
</script>

这种方式能精准控制事件转发的目标元素，同时避免根元素继承不必要的属性。

内容的提问来源于stack exchange，提问作者Josh