前端到處需要用到e-dialog，對dialog的樣式，close處理，visible處理的重復性代碼很多，打算對其進行進一步封裝，寫一個我自己的at-dialog，里頭的slot留給el-dialog，然后在index.vue的子組件testAtDialog.vue里面使用這個at-dialog。相當于用了三層父子關系，這個visible怎么樣處理才能管用？下面的代碼沒法把el-dialog顯示出來：index.vue：其中的testDialogVisible在index.vue的data中定義：testDialogVisible:{bol:false},testAtDialog.vue:Thisisatdialog.exportdefault{name:'testAtDialog',props:['visible'],data(){return{dialogVisible:{bol:false},}},watch:{visible:{handler:function(val,oldval){this.dialogVisible.bol=valif(val.bol){this.init()}},deep:true,immediate:true},},methods:{init(){console.log('init')},}}最后是封裝了el-dialog的組件at-dialog：exportdefault{name:'atDialog',props:{title:{type:String,default:this._("NoTitle"),},size:{type:String,default:"small"},visible:{type:Object,default:{bol:false}}},data(){return{width:"600px",};},watch:{visible(){console.log('watchvisible',this.visible)},size(){switch(this.size){case"auto":this.width=""break;case"medium":this.width="800px"break;case"small":this.width="600px"break;case"mini":this.width="400px"break;}},},methods:{closeDialog(){this.visible.bol=false//this.$emit('update:show',false)},}};