饿了么多个对话框组件Dialog在同一页面中的处理情况

在页面中,一个函数 一组变量对象数据控制多个对话框的显示隐藏

<tempalte>
	<div>
		<el-button @click="handleAction(1)"type="text">按钮1触发成功对话框</el-button>   
		<el-button @click="handleAction(2)"type="text">按钮2触发失败对话框</el-button>   

		<order-import-success
		:visible.sync="visible.successVisible"
		@on-success="handleSuccess"
		></order-import-success>

		<order-import-fail
		:visible.sync="visible.failVisible"
		@on-fail="handleFail"
		></order-import-fail>
	</div>
</tempalte>
<script>
	data(){
            return {
                visible: {
	            successVisible: false,   //按钮1控制
	            failVisible: false,		//按钮2控制		
	        },
	    }
	},
	methods：{
		handleAction(val){
			if(val===1){
				this.setVisibleFlag('successVisible');
			}else if(val===2){
				this.setVisibleFlag('failVisible');
			}
		},
		setVisibleFlag(opt) {
			let obj = {};
			for (let key in this.visible) {
				obj[key] = opt == key ? true : false;
			}
			this.visible = obj;
		},
		handleSuccess(){

		},
		handleFail(){

		}
	}
</script>

对话框组件中（以失败对话框组件为例）

<template>
  <div>
        <el-dialog
	    title="失败对话框"
	    visible.sync="myVisible"
	    width="700px"
	    :close-on-click-modal="false"
        >	
    	<el-button size="small" type="primary" @click="sure">确定</el-button>
    	<el-button size="small" type="warn" @click="cancel">取消</el-button>
    </el-dialog>
  </div>
</template>
<script>
	props:{
            visible: {
	      type: Boolean,
              default:false
	    },
	},
	computed: {
	    myVisible: {
		    get() {
		        return this.visible;
		    },
		    set(val) {
		        this.$emit("update:visible", val);    //此时val=false;
		    }
	    }
	},
	watch: {
	    visible(newVal, oldVal) {
	      
	    }
	},
	methods:{
            sure() {
	      	this.$emit("update:visible", false);
	      	this.$emit("on-fail");
	    },
	    cancel(){
	      	this.$emit("update:visible", false);
	    }
	}
</script>