vue3 如何透传事件

vue3中，父组件绑定了事件，子组件为jsx，孙组件如何获取父组件绑定的事件？

1.子组件需要具名处理事件：

一级一级传，常规做法。

2.子组件无需具名处理事件：

父组件：

<template>
  <ChildComponent @my-event="handleMyEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.jsx';

export default {
  methods: {
    handleMyEvent(payload) {
      console.log('父组件捕获事件:', payload);
    }
  }
};
</script>

子组件：

import GrandChildComponent from './GrandChildComponent.jsx';

export default {
  name: 'ChildComponent',
  setup(_, { attrs }) {
    return () => (
      <div>
        {/* 透传所有的 $attrs (包括事件) 给孙组件 */}
        <GrandChildComponent v-bind={attrs} />
      </div>
    );
  }
};

孙组件：

// 孙组件除了可以通过props触发组件，也可以通过emit
export default {
  name: 'GrandChildComponent',
  setup(props) {
    const triggerEvent = () => {
      if (props.onMyEvent) {
        props.onMyEvent('孙组件触发事件');
      }
    };

    return () => (
      <div>
        <button onClick={triggerEvent}>触发事件</button>
      </div>
    );
  }
};