【父组件】：SampleInput.vue，局部代码片段

引入子组件 ApplyItemChooseDialog.vue，定义变量，用于渲染和显示标识

<script>片段代码

import ApplyItemChooseDialog from "@/views/accept/ApplyItemChooseDialog.vue";

  // 渲染选择受理项目对话框标识，默认不渲染
  const isCreateApplyItemChooseDialog = ref(false);
  // 选择受理项目对话框显示标识
  const applyItemChooseDialogVisible = ref(false);

使用子组件

<template>片段代码

        <ApplyItemChooseDialog
          v-if="isCreateApplyItemChooseDialog"
          :showDialog="applyItemChooseDialogVisible"
          @closeDialog="closeApplyItemChooseDialog" />

点击按钮，弹出对话框

<script>片段代码

const onChooseItemClick = () => {
    // 如果尚未渲染子组件ApplyItemChooseDialog
    if (!isCreateApplyItemChooseDialog.value) {
      // 标识渲染子组件ApplyItemChooseDialog，响应式标识的值为真时，满足v-if的条件，开始渲染
      isCreateApplyItemChooseDialog.value = true;
    }
    applyItemChooseDialogVisible.value = true;
  }

关闭对话框

<script>片段代码

  const closeApplyItemChooseDialog = () => {
    applyItemChooseDialogVisible.value = false;
  }

 

【子组件】：对话框文件，ApplyItemChooseDialog.vue

全部代码

<script setup lang="ts" name="ApplyItemChooseDialog">
import { ref, watch } from "vue";

const props = defineProps(["showDialog"]);

const emits = defineEmits(["closeDialog"]);
// 关闭对话框（点击对话框右上角的关闭按钮）
const closeDialog = () => {
  // 触发执行事件 closeDialog
  emits("closeDialog");
};

// 对话框显示标识
const dialogVisible = ref(false);

watch(
  () => props.showDialog,
  (value) => {
    dialogVisible.value = value;
  },
  { immediate: true }
);

const onConfirmClick = async () => {
  // 关闭对话框
  closeDialog();
}
</script>

<template>
  <el-dialog
    title="对话框"
    v-model="dialogVisible"
    @close="closeDialog">
    <template #footer>
      <div>
        <el-button type="primary" @click="onConfirmClick">确定</el-button>
        <el-button @click="() => (dialogVisible = false)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

【应用效果 】