1、dialog子组件
1)dialogTableVisible:控制dialog显示与隐藏 ,初始值false
2):close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
<template>
<div class="dialog">
<el-dialog title="表头" :visible.sync="dialogTableVisible" width="65%"
:close-on-click-modal="false" @close="closeDialog">
<el-form size="mini" :model="ruleForm" ref="ruleForm">
<el-row :gutter="0">
<el-col>
<el-button type="primary" @click="submitForm()">保存</el-button>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
2、父组件引用
<Edit :show.sync="show" :showParentDialog.sync="dialogVisible" :Info="Info"></versionEdit>
3、子组件接收
export default {
props: {
Info:{
},
show:{
type: Boolean,
default:false,
},
},
watch: {
Info(info) {
//逻辑处理
},
show:{
handler:function (val) {
this.dialogTableVisible = val;
},
immediate: true
}
},
data() {
return {
dialogTableVisible: false,
},
created(){
},
methods: {
},
}
4、更新父组件的值,控制父组件dialog的显示与隐藏,父组件 (:visible.sync="dialogVisible")
this.$emit('update:showParentDialog',true);
5、watch监听不到对象的变化的解决办法(通过object.assign重新创建一个对象)
由 this.Obj = version; 重新创建对象成为能够成功监听到变化 this.Obj = Object.assign({}, this.Obj, version)