vue3 elementplus 父组件关掉子组件dialog

在Vue3中使用Element Plus组件库，可以通过v-model来在父组件中关掉子组件的dialog。在给子组件传递v-model时，需要传递一个Boolean类型的值给visible属性，并在父组件中对该值进行修改来控制子组件dialog的显示与隐藏。以提供的代码为例，可以使用如下的方式来实现：

在App.vue的`<template>`中，给子组件MyDialog传递v-model:visible和v-model属性：

<MyDialog v-model:visible="visible" v-model="dialogValue" />

在App.vue的`<script setup lang="ts">`中，声明一个ref属性来控制dialog的显示与隐藏：

const visible = ref(false)

然后，在父组件中定义一个方法来关闭子组件的dialog，在该方法中将visible.value设置为false：

const handleCloseDialog = () => {
  visible.value = false;
}

最后，在子组件MyDialog的模板中，可以通过点击按钮的方式调用父组件的方法来关闭dialog：

<el-button type="primary" @click="handleCloseDialog">关闭</el-button>

这样，当点击关闭按钮时，会触发父组件的handleCloseDialog方法，从而关闭子组件的dialog。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3 ElementPlus Dialog封装 （一：使用props emit）](https://blog.csdn.net/LeoForBest/article/details/131116795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue整合SSM项目实战](https://download.csdn.net/download/m0_55755339/88241603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]