vue3封装弹窗组件，数据回显

封装组件的流程，第一理解具体的业务需求。想好数据的交互层级，数据进数据出的具体逻辑。
vue的组件封装记住一点不要在子组件修改父组件的数据，需要修改数据emit方法抛出数据父组件修改。

第一步构建template模板

<template>
  <a-modal
    width="800.0px"
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="state.form" :style="{ width: '600px' }">
      <a-form-item
        field="dictName"
        :rules="[{ required: true, message: '字典名称必填' }]"
        :validate-trigger="['change', 'input']"
        tooltip="输入字典名称"
        label="字典名称"
      >
        <a-input v-model="state.form.dictName" placeholder="输入字典名称" />
      </a-form-item>
      <a-form-item
        field="dictType"
        :rules="[{ required: true, message: '字典类型必填' }]"
        label="字典类型"
      >
        <a-input v-model="state.form.dictType" placeholder="输入字典类型" />
      </a-form-item>
      <a-form-item
        field="status"
        :rules="[{ required: true, message: '请选择状态' }]"
        label="状态"
      >
        <a-radio-group v-model="state.form.status">
          <a-radio value="0">正常</a-radio>
          <a-radio value="1">停用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="remark">
        <a-textarea
          v-model="state.form.remark"
          placeholder="请输入内容"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

这就是弹窗组件的一个基本dom结构。这个模板上看的话我们需要父组件传给我们两个值，
一个是弹窗的状态，一个是form表单的值。

第二步定义参数属性

const props = defineProps({
    visible: {
      type: Boolean,
      default: () => false,
    },
    formData: {
      type: Object as PropType<Dict.DictType>,
      default: () => {
        return {
          remark: '',
          dictId: 0,
          dictName: '',
          dictType: '',
          status: '0',
        };
      },
    },
  });

第三步就是子组件的赋值

const formRef = ref<FormInstance>();
  const state = reactive<Dict.State>({
    form: {
      remark: '',
      dictId: 0,
      dictName: '',
      dictType: '',
      status: '0',
    },
  });
  const { visible, formData } = toRefs(props);
  watch(
    () => formData,
    (value) => {
      state.form = value as unknown as Dict.DictType;
    },
    {
      immediate: true,
      deep: true,
    }
  );

接受父组件的formData需要使用toRefs结构不然传过来的值会丢失响应式。

最后把我们验证之后的formData值传递给父组件去调用接口就完成了，在这之前需要声明emit

  const emit = defineEmits(['handleClose', 'handleSubmitData']);
  
  const handleCancel = () => {
    emit('handleClose', false);
    formRef.value?.clearValidate();
  };
  const handleOk = () => {
    formRef?.value?.validate((r: any, Record: any) => {
      // eslint-disable-next-line no-void
      if (r == void 0) {
        emit('handleSubmitData', state.form);
        emit('handleClose', false);
      }
    });
  };

通过emit的方法把子组件的数据传到父组件。这个有很多种方法回调函数等等就不一一列举了。
到这弹窗组件就完成了。