From 7ee684033d372519a75718425a799dee19338ac1 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:30:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor(yvan-lcc):=E4=BC=98=E5=8C=96=20DataFor?=
 =?UTF-8?q?m=20=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BD=BF=E7=94=A8=E5=92=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 getCurrentInstance() 获取当前组件实例
- 用 toRaw(data) 替代直接传递 reactive data
- 创建 VNode 以更灵活地使用 DataForm 组件
- 调整对话框中 DataForm 的属性传递方式
- 移除不必要的 $forceUpdate() 调用
---
 src/pages/DataForm01.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index a515fe8..ab4f712 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { reactive, toRaw } from "vue";
+import { createVNode, getCurrentInstance, reactive, toRaw } from "vue";
 import { Format } from "@ease-forge/shared";
 import { createBlockComponent } from "@ease-forge/runtime";
 import DataForm, { type DataFormProps } from "@/components/data-form/DataForm.vue";
 
 window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
 
+// 当前组件对象
+const instance = getCurrentInstance();
+
 const data = reactive({
     str: "abcABC",
     num_1: 123,
@@ -372,7 +375,8 @@ const MyDataForm = createBlockComponent({
         style: {
             overflowY: "auto",
         },
-        data: "{{ data }}",
+        // data: "{{ data }}",
+        data: toRaw(data),
         formFields: dataForm1.formFields,
         columnCount: dataForm1.columnCount,
         layout: dataForm1.layout,
@@ -383,7 +387,16 @@ const MyDataForm = createBlockComponent({
 });
 
 function test() {
-    system.showDialog(MyDataForm, {
+    system.showDialog(createVNode(DataForm, {
+        style: {
+            overflowY: "auto",
+        },
+        data: toRaw(data),
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    }), {
         title: '模型查看器',
         width: 950,
         height: 400,
@@ -393,6 +406,7 @@ function test() {
         showOkButton: true,
     }).then(() => {
         console.log("data", data);
+        // instance?.proxy.$forceUpdate();
     }).finally();
 }