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

Former-commit-id: 44aeaae6f5e8501915108c008d580989fb15df5b

src/components/Pagination/index.vue

@@ -55,23 +55,11 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:page", "update:limit", "pagination"]);
+const emit = defineEmits(["pagination"]);
 
-const currentPage = computed<number | undefined>({
-  get: () => props.page,
-  set: (value) => {
-    emit("update:page", value);
-  },
-});
+const currentPage = useVModel(props, "page", emit);
 
-const pageSize = computed<number | undefined>({
-  get() {
-    return props.limit;
-  },
-  set(val) {
-    emit("update:limit", val);
-  },
-});
+const pageSize = useVModel(props, "limit", emit);
 
 function handleSizeChange(val: number) {
   emit("pagination", { page: currentPage, limit: val });

src/components/Upload/SingleUpload.vue

@@ -17,8 +17,6 @@
 import { UploadRawFile, UploadRequestOptions } from "element-plus";
 import { uploadFileApi } from "@/api/file";
 
-const emit = defineEmits(["update:modelValue"]);
-
 const props = defineProps({
   modelValue: {
     type: String,
@@ -26,15 +24,8 @@ const props = defineProps({
   },
 });
 
-const imgUrl = computed<string | undefined>({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit("update:modelValue", val);
-  },
-});
+const emit = defineEmits(["update:modelValue"]);
+const imgUrl = useVModel(props, "modelValue", emit);
 
 /**
  * 自定义图片上传

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());
 }
 
 // 组件销毁时，也及时销毁编辑器