本文介绍如何在Vue中使用el-dialog并将其封装为子组件。通过:before-close拦截关闭行为，利用$emit触发close事件通知父组件，实现子组件到父组件的状态同步。文中提供了完整的代码示例，展示如何创建DialogForm.vue并在主页面中调用，帮助开发者理解组件化开发中对话框的复用与状态管理。
el-dialog对话框子组件的关闭
在子组件对话框中，可以使用:before-close属性来拦截默认的关闭行为，从而取消按键绑定和点击事件对对话框的直接关闭操作。
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="close">
<div style="display: flex;justify-content:space-around ;flex: 1;">
<el-button @click="close">取 消</el-button>
<el-button type="primary" >确 定</el-button>
</div>
</el-dialog>子组件需要将关闭逻辑通过事件机制传递给父组件，通常通过触发一个自定义的“close”事件来实现。
methods: {
close() {
this.$emit("close")
},
}父组件在引入子组件时，通过@close监听器接收子组件传递过来的“close”事件，并执行相应的状态更新操作。
<clue-assign-dialog
ref="clueAssign"
:dialog-visible="dialogVisible"
:title="title"
@close="dialogVisible = false">
</clue-assign-dialog>补充：
vue el-dialog封装成子组件（组件化）
前言
- 在实际开发过程中，我们经常提到组件化开发的概念，但在没有代码审查的实际场景中，如何以最便捷的方式实现这一目标？
- 有时由于时间紧迫，开发者可能会将所有代码写在一个页面文件中。当业务逻辑变得复杂时，代码量可能超过1000行。
- 虽然无法保证每个组件都具备高效和高复用性，但至少可以将dialog弹出框抽离出来作为一个独立的子组件。
- 当你把表单部分抽离后，会发现主页面的代码量显著减少，结构更加清晰。
代码实现
1.在文件下创建components文件夹创建DialogForm.vue文件
<template>
<div>
<el-dialog
title="表单"
:visible="dialogVisible"
width="45%"
@close="handleClose"
>
<span>子组件弹出框</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关 闭</el-button>
<el-button type="primary" @click="dialogVisible = false"
>发起合同审批</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'DialogForm',
props: {
DialogFlag: {
default: false
}
},
data () {
return {
// 开关
dialogVisible: false,
}
},
watch: {
DialogFlag () {
this.dialogVisible = this.DialogFlag
}
},
created () {
console.log('审批页面执行')
},
methods: {
// 表单关闭事件-通知父组件关闭（.syanc）
// 不通知父组件可能会报错，导致只能打开一次
handleClose () {
this.$emit('update:DialogFlag', false)
},
}
}
</script>2.在index.vue页面中使用
// 引入组件
import DialogForm from './components/DialogForm.vue'
//注册组件
components: {
DialogForm
},
//data
DialogFlag: false
// html
<DialogForm :DialogFlag.sync="DialogFlag" />
// 使用组件
<el-button
type="primary"
icon="el-icon-circle-plus-outline"
@click="examinadd"
>打开表单</el-button
>
examinadd () {
this.DialogFlag = true
},总结：
经过这一趟流程下来相信你也对 vue el-dialog封装成子组件（组件化）有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
到此这篇关于el-dialog对话框子组件的关闭的文章就介绍到这了,更多相关el-dialog对话框子组件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！