el-dialog打开与关闭的几种方式
目录
el-dialog打开与关闭的几种方式
前言
欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！
欢迎大家关注我的知识库，
你的关注就是我前进的动力！
CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。
第一种，使用 update:visible
父组件
<child-dialog :visible="visible"></child-dialog>子组件
<template>
<el-dialog title="接口实例详情" @open="onOpen" @close="onClose">
// 主体内容
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
visible: Boolean
},
methods: {
// 弹出框打开事件
onOpen() {},
onClose() {
this.$refs['GxptServiceDialog'].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['gialog'].validate(valid => {
if (!valid) return
this.close()
})
}
}
} 第二种 ref
父组件
<child-list></child-list>
<child-dialog ref="dialog"></child-dialog>this.
r e f s . d i a l o g . v i s i b l e
t r u e ; 在兄弟组件中 t h i s . refs.dialog.visible = true; 在兄弟组件中 this.
re
f
s
.
d
ia
l
o
g
.
v
i
s
ib
l
e
=
t
r
u
e
;
在兄弟组件中
t
hi
s
. parent.$refs.dialog.visible = true;
子组件
<template>
<el-dialog :title="title"
:visible.sync="visible"
:width="width"
append-to-body
:close-on-click-modal="false"
@close="close">
<span slot="footer" class="dialog-footer">
<div style="text-align: right;padding-bottom:10px">
<el-button size="medium" type="primary" @click.native="handleSave()">确 定</el-button>
<el-button size="medium" @click.native="close">取 消</el-button>
</div>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
methods: {
close() {
this.visible = false;
}
}
}第三种 兄弟 bus
父组件
<child-list></child-list>
<child-dialog></child-dialog>import Vue from 'vue'
export default new Vue()子组件
<template>
<el-dialog title="接口实例详情" @open="onOpen" @close="onClose" :visible.sync="visible">
// 主体内容
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
mounted() {
bus.$on('isVisible', data => {
this.visible = data
})
},
methods: {
// 弹出框打开事件
onOpen() {},
onClose() {
this.$refs['dialog'].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['gialog'].validate(valid => {
if (!valid) return
this.close()
})
}
}
} 使用
bus .$emit(‘isVisible’, true)
控制弹出框打开与关闭