vue弹窗父子组件调用问题示例详解

//此为子组件（customComponents.vue）
<div>
    <el-dialog 
        :visible.sync="dialogVisible" 
        width="25%" 
        :modal-append-to-body="false">
 
		<div slot="title" class="dialog-header-title">
		   <img  :src="url" >
		   <span> 提示</span>
		</div>
		<span>{{this.message}}</span>
	    <span slot="footer" class="dialog-footer">
		    <el-button 
                type="primary" 
                size="small" 
                @click="dialogVisible = false" >确 定 </el-button>
		</span>
 
	</el-dialog>
</div>
<script>
	export default {
		props: {
			url: String,//String为定义参数类型，例如图片地址就是String类型的
			message: String,//String为定义参数类型
		},
	    data() {
	      return {
	        dialogVisible: true,
	      };
	    },
	}
</script>

//此为父组件（treatmentInterface.vue）
<customComponents 
    v-if="empStopStatus== 0" 
        :url="iconDanger" 
            :message='messageDanger' ></customComponents>
<div v-else></div>
<script>
    //引入局部组件（子组件）
	import customComponents from "../customComponents/customComponents"
    
    export default {
	    name: " ",
	    components: {customComponents},
        data() {
	      return {
			iconDanger: require('../../assets/icons/customComponents/danger.png'),
			messageDanger: "急停按钮被按下！请先检查设备...",
	      };
	    },
	}
</script>

//此为子组件（customComponents.vue）
<div>
    <el-dialog 
        :visible.sync="dialogVisible" 
        width="25%" 
        :modal-append-to-body="false">
 
		<div slot="title" class="dialog-header-title">
		   <img  :src="url" >
		   <span> 提示</span>
		</div>
		<span>{{this.message}}</span>
	    <span slot="footer" class="dialog-footer">
		    <el-button 
                type="primary" 
                    size="small" 
                        @click="buttonClick(methodsName)">确 定</el-button>
		</span>
 
	</el-dialog>
</div>
<script>
	export default {
		props: {
			url: String,//String为定义参数类型，例如图片地址就是String类型的
			message: String,//String为定义参数类型
		},
	    data() {
	      return {
	        dialogVisible: true,
	      };
	    },
        methods:{
            buttonClick(methodName) {
				this[methodName]()
			},
            treatFinished() {
				console.log("执行了..........")
			},
			emergencyStop() {
				this.dialogVisible = false
			}
        },
	}
</script>

 //此为父组件（treatmentInterface.vue）
<!-- 治疗完成弹窗 -->
<customComponents
    v-if="treatStatus== 1" 
        :url="iconDone" 
            :message='messageFinished' 
                :methodsName='treatFinished'></customComponents>
<div v-else></div>
<!-- 急停被按下弹窗 -->
<customComponents 
v-if="empStopStatus== 0" 
    :url="iconDanger" 
        :message='messageDanger' 
            :methodsName='emergencyStop'></customComponents>
<div v-else></div>
<script>
    //引入局部组件（子组件）
	import customComponents from "../customComponents/customComponents"
    
    export default {
	    components: {customComponents},
        data() {
	      return {
			iconDanger: require('../../assets/icons/customComponents/danger.png'),
			messageDanger: "急停按钮被按下！请先检查设备...",
            treatFinished: 'treatFinished',
			emergencyStop: 'emergencyStop',
	      };
	    },
	}
</script>