From 7e1637ccce9a5d9639149caea599a4db1b6d5630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 22 Aug 2024 15:10:38 +0800
Subject: [PATCH] FComponent

---
 src/pages/index-page.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index 9117c56..87aba5b 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -1,4 +1,6 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
+import type { FunctionalComponent } from 'vue';
+
 useHead({
   // Titles
   title: 'Hello World',
@@ -13,6 +15,14 @@ useHead({
 definePage({
   alias: '/',
 });
+
+// https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
+const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
+  <>
+    <div>This is a functional component with prop: {props.prop}</div>
+    <div>{props.prop}</div>
+  </>
+);
 </script>
 
 <template>
@@ -24,4 +34,5 @@ definePage({
     <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
     <li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
   </ul>
+  <FComponent prop="Hello World" />
 </template>