I write the modal modal box into the child component, and the button of the parent component opens the mode box, which is written as follows:
the content of the parent component is:
<template>
<div>
<create-user :add-user-modal="addUserModal" @on-complete="complete">
</create-user>
<Card>
<Button @click="addUserModal = true" type="primary" >{{ $t("add-user") }}</Button>
</Card>
</div>
</template>
<script>
import createUser from "./components/create-user.vue"
export default {
components: {
createUser
},
data () {
return {
addUserModal: false,
}
},
methods: {
complete (e) {
this.addUserModal = e;
}
}
}
</script>the content of the subcomponent is:
<template>
<Modal v-model="showModal">
<p slot="header" style="text-align:center">
<Icon type="person-add"></Icon>
<span></span>
<div style="text-align:center">
//
<div slot="footer">
<Button @click="close"></Button>
<Button type="info" :loading="modal_loading" @click="addUser"></Button>
</div>
</div>
</Modal>
</template>
<script>
export default {
name: "add-user-modal",
props : {
addUserModal : Boolean,
},
data () {
return {
showModal: this.addUserModal,
modal_loading: false,
formItem: {
jobNum: "",
name: "",
dept: "",
email: "",
phone: ""
}
}
},
methods: {
addUser () {
let _this=this;
_this.modal_loading = true;
console.log(_this.formItem);
setTimeout(() => {
_this.modal_loading = false;
_this.showModal = false;
_this.$emit("on-complete",false);
_this.$Message.success("Successfully delete");
}, 2000);
},
close () {
this.showModal = false;
this.$emit("on-complete",!this.addUserModal);
}
},
mounted: function() {
console.log(this.show)
}
}
</script>Click the parent component button, and the modal box does not appear