el-dialog对话框子组件的关闭方法
作者：Dolores_zsq
这篇文章主要介绍了el-dialog对话框子组件的关闭方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
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封装成子组件（组件化）
前言
- 实际开发过程中我们经常听见组件化开发，但在实际开发过程中（没有人审查时）怎么方便来
- 我们有时是因为时间不够，所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行
- 虽然不能要求自己写出高效复用性高的组件，把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对话框子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！