支持 Vue 3.2.x 语法升级为，script setup

src/views/comp/form/basic.vue

@@ -3,13 +3,15 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm
           submitButtonText="提交预约"
           layout="horizontal"
           :gridProps="{ cols: 1 }"
           :schemas="schemas"
+          @submit="handleSubmit"
+          @reset="handleReset"
         >
           <template #statusSlot="{ model, field }">
             <n-input v-model:value="model[field]" />
@@ -20,12 +22,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -149,29 +150,16 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
 
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        schemas,
-        formRef,
-        handleSubmit,
-        handleReset,
-      };
-    },
-  });
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>