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>({
+const currentPage = useVModel(props, "page", emit);
-  get: () => props.page,
-  set: (value) => {
-    emit("update:page", value);
-  },
-});
 
-const pageSize = computed<number | undefined>({
+const pageSize = useVModel(props, "limit", emit);
-  get() {
-    return props.limit;
-  },
-  set(val) {
-    emit("update:limit", val);
-  },
-});
 
 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>({
+const emit = defineEmits(["update:modelValue"]);
-  get() {
+const imgUrl = useVModel(props, "modelValue", emit);
-    return props.modelValue;
-  },
-  set(val) {
-    // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit("update:modelValue", val);
-  },
-});
 
 /**
  * 自定义图片上传

src/components/WangEditor/index.vue

@@ -20,52 +20,51 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, reactive, toRefs } from 'vue';
+import { onBeforeUnmount, shallowRef, reactive, toRefs } from "vue";
-import { Editor, Toolbar } from '@wangeditor/editor-for-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({
+const toolbarConfig = ref({});
-  toolbarConfig: {},
+
-  editorConfig: {
+const editorConfig = ref({
-    placeholder: '请输入内容...',
+  placeholder: "请输入内容...",
   MENU_CONF: {
     uploadImage: {
       // 自定义图片上传
       async customUpload(file: any, insertFn: any) {
-          uploadFileApi(file).then(response => {
+        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());
 }
 
 // 组件销毁时，也及时销毁编辑器