refactor: ♻️ vueVModel优化父子组件数据双向绑定和更新事件代码

Former-commit-id: 44aeaae6f5e8501915108c008d580989fb15df5b

src/components/WangEditor/index.vue

@@ -20,52 +20,51 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, reactive, toRefs } from 'vue';
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import { onBeforeUnmount, shallowRef, reactive, toRefs } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
 // API 引用
-import { uploadFileApi } from '@/api/file';
+import { uploadFileApi } from "@/api/file";
 
 const props = defineProps({
   modelValue: {
     type: [String],
-    default: ''
-  }
+    default: "",
+  },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
+
+const defaultHtml = useVModel(props, "modelValue", emit);
 
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef();
 
-const state = reactive({
-  toolbarConfig: {},
-  editorConfig: {
-    placeholder: '请输入内容...',
-    MENU_CONF: {
-      uploadImage: {
-        // 自定义图片上传
-        async customUpload(file: any, insertFn: any) {
-          uploadFileApi(file).then(response => {
-            const url = response.data.url;
-            insertFn(url);
-          });
-        }
-      }
-    }
+const toolbarConfig = ref({});
+
+const editorConfig = ref({
+  placeholder: "请输入内容...",
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义图片上传
+      async customUpload(file: any, insertFn: any) {
+        uploadFileApi(file).then((response) => {
+          const url = response.data.url;
+          insertFn(url);
+        });
+      },
+    },
   },
-  defaultHtml: props.modelValue,
-  mode: 'default'
 });
 
-const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);
+const mode = ref("default");
 
 const handleCreated = (editor: any) => {
   editorRef.value = editor; // 记录 editor 实例，重要！
 };
 
 function handleChange(editor: any) {
-  emit('update:modelValue', editor.getHtml());
+  emit("update:modelValue", editor.getHtml());
 }
 
 // 组件销毁时，也及时销毁编辑器