VueJS：已知Props传递方法，如何将子组件所有事件传递给父组件？

当然有类似的方法！在Vue里，对应$attrs（传递未声明Props）的事件传递方案，分Vue 2和Vue 3两种情况来实现：

Vue 2 解决方案 #

在Vue 2中，我们可以使用$listeners对象——它包含了父组件传递给当前组件的所有事件监听（不包含组件内部声明的自定义事件）。配合v-on="$listeners"就能把这些事件监听完整传递给子组件。

结合你的示例修改Wrapper组件：

<template>
  <!-- 同时传递未声明Props和所有事件监听 -->
  <child-component v-bind="$attrs" v-on="$listeners" />
</template>
<script>
module.exports = {
  inheritAttrs: false,
  // ...其他组件配置
}
</script>

举个实际场景：如果Parent组件这样绑定事件：

<template>
  <wrapper 
    :prop1="false" 
    :prop2="true" 
    @child-click="handleChildClick" 
    @custom-event="handleCustom" 
  />
</template>
<script>
module.exports = {
  methods: {
    handleChildClick() {
      console.log('触发了Child组件的click事件')
    },
    handleCustom() {
      console.log('触发了Child组件的自定义事件')
    }
  }
}
</script>

当Child组件通过$emit('child-click')或$emit('custom-event')触发事件时，Parent组件对应的方法会直接响应。

Vue 3 解决方案 #

Vue 3做了简化：$listeners被合并到了$attrs中，现在$attrs既包含未声明的Props，也包含事件监听。所以只需要v-bind="$attrs"就能同时传递Props和事件，不过要注意两个点：

1. 需要设置inheritAttrs: false，避免Vue默认把未声明Props作为HTML属性绑定到组件根元素；
2. 如果使用<script setup>语法，需要用useAttrs()获取attrs对象。

用<script setup>改写Wrapper组件：

<template>
  <child-component v-bind="$attrs" />
</template>
<script setup>
import { useAttrs } from 'vue';
const attrs = useAttrs();
// 手动关闭默认属性继承
defineOptions({
  inheritAttrs: false
});
</script>

用选项式API的Vue 3组件写法：

<template>
  <child-component v-bind="$attrs" />
</template>
<script>
export default {
  inheritAttrs: false,
  // ...其他组件配置
}
</script>

此时Parent组件绑定的事件会自动传递到Child组件，效果和Vue 2完全一致。

补充说明 #

• 不管是Vue 2还是Vue 3，这种方式传递的是父组件绑定到当前组件、且当前组件未声明为自定义事件的监听。如果Wrapper组件自己声明了emits: ['child-click']，这个事件就不会被包含在$listeners（Vue2）或$attrs（Vue3）中，需要手动处理。
• inheritAttrs: false是必要的，它能阻止Vue把未声明Props默认渲染成根元素的HTML属性，避免重复绑定问题。

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