修改文件结构

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

@@ -0,0 +1,54 @@
+import { defineComponent, defineEmits, onMounted} from 'vue'
+import type { JSX } from "vue/jsx-runtime";
+
+export default defineComponent({
+    name: "Header",
+    props: {
+        text: {
+            type: Array<{ id: number, title: string }>,
+            default: () => []
+        }
+    },
+    emits: {
+        sendMessage: (message: string) => typeof message === 'string'
+    },
+
+    setup(props, { attrs, slots, emit, expose }) {
+
+        onMounted(() => {
+            console.log("onMounted")
+        })
+
+        const handleClick = () => {
+            console.log("handleClick")
+            emit('sendMessage', '子给父的数据')
+        }
+
+        const button = (): JSX.Element => {
+            return <button onClick={handleClick}>父向子emit点我</button>
+        }
+
+        return () => (
+            <div>
+                <h1>头部组件</h1>
+
+                { button() }
+
+                { slots.default?.() }
+
+                { slots.header?.() }
+
+                <div class="ScopedSlots">
+                    <p>作用于插槽：</p>
+                    <ul>
+                        {
+                            props.text.map(item => {
+                                return slots.scoped?.(item)
+                            })
+                        }
+                    </ul>
+                </div>
+            </div>
+        )
+    }
+})