简单修改

front-end/main-app/src/app/components/Header.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, defineEmits, onMounted} from 'vue'
+import { defineComponent, defineEmits, onMounted, PropType } from 'vue'
 import type { JSX } from "vue/jsx-runtime";
 
 export default defineComponent({
@@ -7,6 +7,11 @@ export default defineComponent({
         text: {
             type: Array<{ id: number, title: string }>,
             default: () => []
+        },
+        // 点击事件
+        onClick: {
+            type: Function as PropType<() => void>,
+            default: () => { }
         }
     },
     emits: {
@@ -30,13 +35,13 @@ export default defineComponent({
 
         return () => (
             <div>
-                <h1>头部组件</h1>
+                <h1 onClick={props.onClick}>头部组件-点我</h1>
 
-                { button() }
+                {button()}
 
-                { slots.default?.() }
+                {slots.default?.()}
 
-                { slots.header?.() }
+                {slots.header?.()}
 
                 <div class="ScopedSlots">
                     <p>作用于插槽：</p>

front-end/main-app/src/app/views/Home.tsx

@@ -45,7 +45,12 @@ export default defineComponent({
 
     return () => (
       <div class="home">
-        <Header text={state.list} onSendMessage={handleChildEvent}>
+        <Header
+          text={state.list}
+          onClick={() => {
+            console.log("通过props自定义事件传给子组件");
+          }}
+          onSendMessage={handleChildEvent}>
           {{
             scoped: (item: ListItemType) => <li key={item.id}>{item.title}</li>,
             header: () => <div class="header">父到子 具名 插槽</div>,