Vue3父子通信-setup+经典父组件与子组件el-dialog

一、父组件
绑定方法，引入子组件并传递数据和方法

<el-button size="small" plain type="primary" @click="click_add_notice">+添加公告</el-button>
<AddNoticeDialog
        v-model="AddNoticeDialogDialogVisible"
        @addNoticeSuccess="get_infocenter_notice_list"
	:complaintRecordId="currentComplaintRecordId"	
      ></AddNoticeDialog>
import AddNoticeDialog from './AddNoticeDialog.vue'
const AddNoticeDialogDialogVisible = ref(false)
const currentComplaintRecordId = ref<string | null>(null)
//打开弹窗
const click_add_notice = () => {
  AddNoticeDialogDialogVisible.value = true
}

二、子组件

<script setup lang="ts">
import { ref } from 'vue'
import parametersuperApi from '@/api/parametersuper/index'

import { ElMessage, type FormInstance } from 'element-plus'
import { regulatoryBodiesIdStore } from '@/stores/insuiList'
import { storeToRefs } from 'pinia'
const { regulatoryBodiesId } = storeToRefs(regulatoryBodiesIdStore())
//接收父组件数据
const model = defineModel()
//接收父组件方法
const emit = defineEmits<{
  (e: 'addNoticeSuccess'): void
}>()
//定义表单数据
const noticeForm: any = ref({
  type: null,
  title: '',
  content: '',
  file: '',
  picture: '',
  releaseMode: null,
  planReleaseTime: null
})
const click_save_noticeForm = () => {
  let params = {
    regulatorId: regulatoryBodiesId.value,
    type: noticeForm.value.type,
    title: noticeForm.value.title,
    content: noticeForm.value.content,
    file: noticeForm.value.file,
    picture: noticeForm.value.picture,
    releaseMode: noticeForm.value.releaseMode,
    planReleaseTime: noticeForm.value.planReleaseTime
  }
  parametersuperApi.add_infocenter_notice_api(params).then((res: any) => {
    if (res.errorcode == 0) {
	//调用父组件方法
      emit('addNoticeSuccess')
      ElMessage.success('新增成功')
//关闭弹窗
      model.value = false
    }
  })
}
//弹窗打开时逻辑
function handleDialogOpen() {
  addDisabled.value = false
}
</script>
<template>
  <el-dialog title="新增公告" v-model="model" @open="handleDialogOpen">
    <el-form :model="noticeForm" label-width="auto" label-suffix="：" ref="formRef">
      <el-form-item>
        <el-col :span="11">
          <el-form-item label="公告类型" prop="type">
            <el-select v-model="noticeForm.type" placeholder="请选择公告类型">
              <el-option label="行业公告" value="0"> </el-option>
              <el-option label="督导公告" value="1"> </el-option>
              <el-option label="系统公告" value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11"> </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="24">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="noticeForm.title"> </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="2"> </el-col>
        <el-col :span="11">
        </el-col> -->
      </el-form-item>
      <el-form-item prop="content" label="公告内容">
        <el-input v-model="noticeForm.content" type="textarea" :rows="7"> </el-input>
      </el-form-item>
      <el-form-item label="添加附件"> </el-form-item>
      <el-form-item label="上传图片"> </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-form-item label="发布方式" prop="releaseMode">
            <el-switch
              v-model="noticeForm.releaseMode"
              active-text="自动"
              inactive-text="手动"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11"> </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-form-item label="发布时间" prop="planReleaseTime">
            <el-date-picker
              v-model="noticeForm.planReleaseTime"
              type="datetime"
              placeholder="请选择"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11"> </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="click_save_noticeForm" :disabled="addDisabled">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

三、另一种方法

绑定新增按钮弹出表单，使用子组件addDialog，定义了ref，传递数据option，rowData，formTitle，传递方法closeAuthorizeChildDialog，get_Institutions_List

父组件

<el-button
              icon="fas fa-plus"
              type="text"
              style="margin: -10px 0px"
              @click="click_Add_Institutions"
              >&nbsp;新增监管机构</el-button
            >
<addDialog
        ref="addDialogRef"
        :option="optionAuth"
        :rowData="rowData"
        :formTitle="formTitle"
        @closeAuthorizeChildDialog="closeAuthorizeChildDialog"
        @get_Institutions_List="get_Institutions_List"
      ></addDialog>
import addDialog from "./add_dialog.vue";
const addDialogRef: any = ref();
const optionAuth = ref({
  dialogAuthorizeChildVisible: false,
  currectRowData: {},
});
const formTitle = ref("新增监管机构");
const rowData = ref({});
//打开弹窗传递title调用子组件方法clearForm
const click_Add_Institutions = () => {
  optionAuth.value.dialogAuthorizeChildVisible = true;
  formTitle.value = "新增监管机构";
  addDialogRef.value.clearForm();
};
//关闭弹窗
const closeAuthorizeChildDialog = () => {
  optionAuth.value.dialogAuthorizeChildVisible = false;
};
// 获取机构列表
const get_Institutions_List = () => {
  let loadingInstance: any = null;
  loadingInstance = ElLoading.service({
    lock: true,
    text: "加载中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  proxy.axios
    .get(`/regulator/get`)
    .then(({ data }: { data: any }) => {
      tableData_Institutions_List.value = data.data;
      if (loadingInstance) {
        loadingInstance.close();
      }
    })
    .catch((err: any) => {
      console.error(err);
      if (loadingInstance) {
        loadingInstance.close();
      }
    });
};

子组件

//add_dialog.vue
//定义方法closeAuthorizeChildDialog，绑定数据option1，title，form表单布局

<el-dialog
    @close="closeAuthorizeChildDialog"
    v-model="option1"
    :title="props.formTitle"
    width="50%"
  >
    <el-form :model="form">
      <el-form-item
        label="机构名称"
        prop="orgName"
        :label-width="formLabelWidth"
      >
        <el-input
          placeholder="请输入"
          class="inputForm"
          v-model="form.orgName"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="机构简称"
        prop="shortName"
        :label-width="formLabelWidth"
      >
        <el-input
          placeholder="请输入"
          class="inputForm"
          v-model="form.shortName"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="props.formTitle == '新增监管机构'"
        label="机构ID"
        prop="orgId"
        :label-width="formLabelWidth"
      >
        <el-input
          placeholder="请输入"
          class="inputForm"
          v-model="form.orgId"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-else
        label="机构ID"
        prop="orgId"
        :label-width="formLabelWidth"
      >
        <el-input
          disabled
          placeholder="请输入"
          class="inputForm"
          v-model="form.orgId"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="启用状态"
        prop="status"
        :label-width="formLabelWidth"
      >
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item
        :label-width="formLabelWidth"
        v-if="props.formTitle == '新增监管机构'"
        label="所在位置"
        prop="county"
        :rules="{ required: true, message: '请选择所在区县！' }"
      >
        <el-row>
          <el-col :span="6">
            <el-select
              v-model="form.province"
              placeholder="请选择省"
              filterable
              @change="provinceChange"
            >
              <el-option
                v-for="province in provinces"
                :label="province.label"
                :value="province.value"
                :key="province.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="form.city"
              placeholder="请选择市"
              filterable
              @change="cityChange"
            >
              <el-option
                v-for="city in cities"
                :label="city.label"
                :value="city.value"
                :key="city.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="form.county"
              placeholder="请选择县区"
              filterable
            >
              <el-option
                v-for="county in counties"
                :label="county.label"
                :value="county.value"
                :key="county.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="备注" prop="remarks" :label-width="formLabelWidth">
        <el-input
          placeholder="请输入内容"
          class="inputForm"
          v-model="form.remarks"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeAuthorizeChildDialog">取消</el-button>
        <el-button type="primary" @click="onClick_SaveForm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
import {
  ref,
  defineProps,
  reactive,
  onMounted,
  toRef,
  defineEmits,
  getCurrentInstance,
  computed,
  defineExpose,
} from "vue";
//暴露方法供父组件调用
defineExpose({ clearForm, editToForm });
//接收父组件传递数据
const props = defineProps({
  option: Object,
  rowData: Object,
  formTitle: String,
});
//转成ref响应式
const option = toRef(props, "option");
//接收父组件传递方法
const emit = defineEmits([
  "closeAuthorizeChildDialog",
  "get_Institutions_List",
]);
//调用父组件方法
const closeAuthorizeChildDialog = () => {
  emit("closeAuthorizeChildDialog");
};
//计算属性
const option1 = computed({
  get: () => option.value?.dialogAuthorizeChildVisible,
  set: (val: any) => {
    emit("closeAuthorizeChildDialog");
  },
});
//定义form表单
const form: any = reactive({
  orgId: "",
  orgName: "",
  shortName: "",
  status: true,
  address: "",
  longitude: "123",
  latitude: "123",
  remarks: "",
  province: "",
  city: "",
  county: "",
});
//定义方法clearForm
const clearForm = () => {
  form.orgId = "";
  form.orgName = "";
  form.shortName = "";
  form.status = true;
  form.address = "";
  form.longitude = "";
  form.latitude = "";
  form.remarks = "";
};