首页 > 其他分享 >Vue3父子通信-setup+经典父组件与子组件el-dialog

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

时间：2024-08-21 19:24:22浏览次数：13  
标签：el const form setup value 组件 noticeForm ref

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

<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 = "";
};

标签：el,const,form,setup,value,组件,noticeForm,ref
From： https://blog.csdn.net/weixin_72439307/article/details/141401033

相关文章

  • shell example
    1.拷贝根文件系统，运行windows下的vbs脚本，准备烧录点击查看代码#!/bin/bashwhile:do echo"/************20表示程序适配G20主机，30表示程序适配G30*********/" echo"输入20or30:"readaNumcase$aNumin20)echo"你输入的数字为$......
  • C# Delegate 操作符深入浅出
    目录Delegate基础Delegate操作符Lambda表达式总结在C#中，delegate是一个非常重要的概念，它提供了一种将方法作为参数传递的方式。delegate操作符，即=>，是C#6.0引入的一种新语法，用于简化delegate的声明和使用。在这篇博客中，我们将深入探讨delegate操作符的原理和用法。......
  • elmentplus中删除el-treen 数据时，树的数据改变了，但是树不刷新
    <el-treeref="treeRef"style="max-width:600px"class="filter-tree":data="treeData":props="defaultProps"default-expand-all:filter-node-method="filterNode"n......
  • jmeter压测组件bzm-Arrivals Thread Group使用Jenkins运行配置
    jmeter脚本设置Jenkins设置运行代码设置cd/home/jmeterWorkplace/performceTps/script/home/app/apache-jmeter-5.4.3/bin/jmeter-n-tjenkins_test.jmx-Jtarget_rate=${target_rate}-Jramp_up_time=${ramp_up_time}-Jramp_up_step_count=${ramp_up_step_count}-Jh......
  • Element Plus表单调用resetFields方法失效
    问题描述：你会发现在第一次点击新增按钮的时候然后再点击编辑按钮，再点击新增按钮表单是可以正常清空的。但是如果你第一次点击编辑按钮，表单数据回显，关闭窗口再点击新增按钮发现编辑的数据竟然还在，就很玄乎。而且，你点击编辑其他数据再点击新增按钮发现竟然是第一次点击编辑的数据！......
  • vue3中script标签的setup实现原理
    概述当vue3新建组件时，我们有两种选择选项式和组合式，如下所示传统方式<script>import{ref}from"vue";exportdefault{setup(){constcount=ref(0);consthandleClick=()=>{count.value++;};return{count,handleClick......
  • poi的excel导出
    poi的excel导出这个导出依赖于模板文件，可便捷设置表头样式。也可以不使用模板，直接创建。1.引入poi依赖<dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency>2.准备模板文件3.编写导出代......
  • Flannel IPIP DR 模式
    FlannelIPIPDR模式一、环境信息主机IPubuntu172.16.94.141软件版本docker26.1.4helmv3.15.0-rc.2kind0.18.0clab0.54.2kubernetes1.23.4ubuntuosUbuntu20.04.6LTSkernel5.11.5内核升级文档二、安装服务kind配置文......
  • Apache SeaTunnel数据处理引擎适配的演进和规划
    作者|ChaoTian(tyrantlucifer)，ApacheSeaTunnelPMCMember摘要ApacheSeaTunnel作为一个高性能数据同步工具，以其高效的数据处理能力，为数据集成领域带来了创新。在引擎上，ApacheSeaTunnel除了支持自身的Zeta引擎外，还支持Spark和Flink。在2024年的CommunityOverCodeAsia，Apa......
  • Abaqus UFIELD和USDFLD子程序详解
    UFIELD和USDFLD是Abaqus极具迷惑性的两个子程序，这两个家伙长得就比较像兄弟，而且都是用来自定义场变量的，同时还有一个状态变量statevariable掺和在中间，再加上帮助里面的解释也基本上不是人话，很容易就把人搞二了，今天帖主就来撸一撸这两个子程序。1、自定义场变量  Abaqus......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99