--demand 面授课

src/components/common/CheckBox.vue

@@ -1,24 +1,29 @@
 <template>
-  <a-checkbox @change="change">
+  <a-checkbox v-model:checked="checked" @change="change">
     <slot></slot>
   </a-checkbox>
 </template>
 <script setup>
-import {defineEmits, defineProps} from "vue";
+import {defineEmits, defineProps, ref, watchEffect} from "vue";
 
 const props = defineProps({
-  checkValue: {
-    type: Boolean,
-    default: true
-  },
-  unCheckValue: {
-    type: Boolean,
+  modelValue: {
+    type: [Boolean, Number, String],
     default: false
   },
+  checkValue: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  unCheckValue: {
+    type: [Boolean, Number, String],
+    default: true
+  },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
+const checked = ref(props.modelValue);
+watchEffect(() => checked.value = props.modelValue);
+
+const change = ({ target: { checked } }) => emit("update:modelValue", checked ? props.checkValue : props.unCheckValue);
 
-function change({ target: { checked } }) {
-  emit("update:modelValue", checked ? props.checkValue : props.unCheckValue);
-}
 </script>