<template>
<div>
<el-dialog
title="表单"
:visible="dialogVisible"
@close="handleClose"
>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'DialogForm',
props: {
DialogFlag: {
default: false
}
},
data () {
return {
// 开关
dialogVisible: false,
}
},
watch: {
DialogFlag () {
this.dialogVisible = this.DialogFlag
}
},
methods: {
// 表单关闭事件-通知父组件关闭(.syanc)
// 不通知父组件可能会报错,导致只能打开一次
handleClose () {
this.$emit('update:DialogFlag', false)
},
}
}
</script>
// 引入组件
import DialogForm from '@/views/**/DialogForm.vue'
//注册组件
components: {
DialogForm
},
//data
DialogFlag: false
// html
//:DialogFlag.sync 很关键
<DialogForm :DialogFlag.sync="DialogFlag" />
// 使用组件
<el-button
type="primary"
icon="el-icon-circle-plus-outline"
@click="openDialog"
>打开表单</el-button
>
openDialog() {
this.DialogFlag = true
},
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。