vue3中父页面的弹框中引入子页面，并在子页面的方法中关闭父页面弹框

首先是父页面代码

 <a appHeader="" aria-current="page" style="height: 20px;"
                 class="router-link-exact-active router-link-active"
                 @click="openCreateLinePage">新建线路</a>
                 
<el-dialog title="新建线路" v-model="openLine" width="1200px" style="overflow-y: auto" :close-on-click-modal="false" :draggable="true" append-to-body>
        <Createline :closeLineDialog="closeLineDialog" />
      </el-dialog>
<script lang="ts" setup>
import Createline from "@/views/drawing/createline";
const openLine = ref(false);

/**
 * 打开新建线路对话框
 */
function openCreateLinePage(){
  openLine.value = true
}

/**
 * 关闭新建线路弹窗页面
 */
const closeLineDialog = () => {
  openLine.value = false;
};
</script>

这里的Createline 就是引入的子页面组件
下面是子页面的代码

<el-button style="margin-top: 50px; margin-left: 20px;" v-else-if="active === 3" type="primary" @click="onSubmit()">
        提交
      </el-button>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  closeLineDialog: Function  //这里的closeLineDialog对应父页面中的 **:closeLineDialog**
});

/**
 * 提交按钮
 */
function onSubmit() {
	props.closeLineDialog();
}
</script>

第一种方式是把el-dialog写在父页面了，接下来第二种是全部写在子页面的

父页面
<template>
	<span class="el-link__inner" @click="checkClick()">审批</span>
	<CheckStation :show="openCheck" @update:show="updateOpenCheck"/>
</template>
<script lang="ts" setup>
import CheckStation from "@/views/demo/checkStation.vue"

const openCheck = ref(false);

//打开弹窗按钮
function checkClick() {
  openCheck.value = true
  }
  //接收到子页面关闭弹窗的事件，改变openCheck的值，否则在刷新页面之前openCheck会一直是true，导致无法第二次打开弹窗
const updateOpenCheck = (value) => {
  openCheck.value = value;
};
<script>

子页面
<template>
  <el-dialog v-model="open" :title="dialogTitle" @close="closeDialog">
    <p>这是一个弹窗</p>
  </el-dialog>
</template>

<script setup>
import {defineProps, getCurrentInstance, onMounted, ref, watch} from 'vue';

const instance = getCurrentInstance();

const dialogTitle = '审批流程';
const open = ref(false)

const props = defineProps({
  show: Boolean
});

const closeDialog = () => {
  open.value = false;
  if (instance) {
    const emit = instance.emit;
    emit('update:show', false); // 向父组件发送更新后的状态
  }
};

watch(() => props.show, (val) => {
  console.log(val)
  if (val === true){
    open.value = true
  }
})

</script>

子组件给父组件传值

子组件
<script setup>
	const emits = defineEmits(['update:deleteDmhList']);
	const handleInputChange = (value) => {
	  let removedItems = [];
	  // 触发事件，将被删除的元素传递给父组件
	  emits("update:deleteDmhList", removedItems);
	}
</script>

父组件
<template>
  <div style="width: 100%; height: 100vh;overflow: auto;">
    <djjdmh @update:deleteDmhList="handleDeleteDmhList"/>
  </div>
</template>
<script setup>
	const emits = defineEmits(['update:deleteDmhList']);
	const handleInputChange = (value) => {
	  let removedItems = [];
	  // 触发事件，将被删除的元素传递给父组件
	  emits("update:deleteDmhList", removedItems);
	}
	function handleDeleteDmhList(removedItems) {
	  // 在这里处理从子组件传递过来的被删除的元素列表
	  console.log('元素列表：', removedItems)
	}
</script>