1. Vue pop-up window Parent-son component emit picture
1.:modal-append-to-body="false" In order to solve the use of the mask layer blocking the dialog window after the dialog window component is introduced in element ui, the default is true, and it can be solved by changing it to false.
2. This pop-up window is mainly used to solve the repetition of the pop-up window displayed on the front desk of the upper computer after receiving the emergency stop signal of the lower computer.
//This is a child component ()<div>
<el-dialog
:="dialogVisible"
width="25%"
:modal-append-to-body="false">
<div slot="title" class="dialog-header-title">
<img :src="url" >
<span> hint</span>
</div>
<span>{{}}</span>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
size="small"
@click="dialogVisible = false" >Confirm Certainly </el-button>
</span>
</el-dialog>
</div>
<script>
export default {
props: {
url: String,//String defines the parameter type, for example, the image address is String type message: String,//String defines the parameter type },
data() {
return {
dialogVisible: true,
};
},
}
</script>//This is the parent component()<customComponents
v-if="empStopStatus== 0"
:url="iconDanger"
:message='messageDanger' ></customComponents>
<div v-else></div>
<script>
//Introduce local components (subcomponents) import customComponents from "../customComponents/customComponents"
export default {
name: " ",
components: {customComponents},
data() {
return {
iconDanger: require('../../assets/icons/customComponents/'),
messageDanger: "The emergency stop button is pressed! Please check the equipment first...",
};
},
}
</script>2. The vue parent component calls different methods in the child component
1. Dynamic method binding of vue
Mainly looking at:
①: @click in the <el-button> tag
②: buttonClick (methodName) in methods
//This is a child component ()<div>
<el-dialog
:="dialogVisible"
width="25%"
:modal-append-to-body="false">
<div slot="title" class="dialog-header-title">
<img :src="url" >
<span> hint</span>
</div>
<span>{{}}</span>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
size="small"
@click="buttonClick(methodsName)">Confirm Certainly</el-button>
</span>
</el-dialog>
</div>
<script>
export default {
props: {
url: String,//String defines the parameter type, for example, the image address is String type message: String,//String defines the parameter type },
data() {
return {
dialogVisible: true,
};
},
methods:{
buttonClick(methodName) {
this[methodName]()
},
treatFinished() {
("Executed...")
},
emergencyStop() {
= false
}
},
}
</script>At this point, the binding of different methods in the child component has been completed. The next step is to call the methods in the child component above in the parent component.
2. Parent component calls child component methods
//This is the parent component()<!-- Treatment completion pop-up window -->
<customComponents
v-if="treatStatus== 1"
:url="iconDone"
:message='messageFinished'
:methodsName='treatFinished'></customComponents>
<div v-else></div>
<!-- The pop-up window was pressed when the emergency stop was stopped -->
<customComponents
v-if="empStopStatus== 0"
:url="iconDanger"
:message='messageDanger'
:methodsName='emergencyStop'></customComponents>
<div v-else></div>
<script>
//Introduce local components (subcomponents) import customComponents from "../customComponents/customComponents"
export default {
components: {customComponents},
data() {
return {
iconDanger: require('../../assets/icons/customComponents/'),
messageDanger: "The emergency stop button is pressed! Please check the equipment first...",
treatFinished: 'treatFinished',
emergencyStop: 'emergencyStop',
};
},
}
</script>This is the end of this article about the call of parent-child component of vue pop-up window. For more related content of vue parent-child component call, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!