vue 项目关于modal父子之间传值,关闭和开启弹框
1:需要在组件中引入改组件<script>import { urlPath } from "@/libs/util";import { getUserInfo } from "@/libs/util";import expandRow from "../modal/expandRow.vue";import { Modal, Message, AnchorLink } fro...
·
1:需要在组件中引入改组件
<script>
import { urlPath } from "@/libs/util";
import { getUserInfo } from "@/libs/util";
import expandRow from "../modal/expandRow.vue";
import { Modal, Message, AnchorLink } from "iview";
import viewerExtend from "@/components/viewerExtend/viewerExtend.vue";
2:根据项目需要在modal中配置不同的参数
<Modal
loading
v-model="auditModalShow"
footer-hide
class="auditModal"
title="学员详情"
width="90%"
scrollable
fullscreen
mask-closable
>
<audit
:str="modalId"
:rowId="rowId"
:auditPath="auditPath"
v-on:cancel="auditModalShow=false"
v-on:success="auditSuccess"
></audit>
</Modal>
3: v-on:cancel 和 v-on:success是方法 v-on:success=“auditSuccess” auditSuccess是函数,需要定义
//这里接受子组件传来的值
auditSuccess(data) {
if (data.code == 40000) {
Message.success("保存成功!");
this.auditModalShow = true;
this.reload();
} else {
Message.error(data.msg);
}
},
4:子组件通过$emit的方法向父组件传值
onDtlsSave() {
let params = {
id: this.rowId,
audit_status: this.dtlsObj.audit_status,
audit_notes: this.dtlsObj.audit_notes
};
Modal.confirm({
title: "提示信息",
content: "确认提交?",
onOk: () => {
this.$refs["formValidate"].validate(valid => {
if (valid) {
this.postRequest(
this.QKPX_API_HOST,
"leave_apply/leave_audit",
params
).then(res => {
//向度组件传值父组件通过success接收
let data = res.data;
this.$emit("success", data);
});
}
});
5:这样就完成了
更多推荐
已为社区贡献5条内容
所有评论(0)