vue 项目关于modal父子之间传值,关闭和开启弹框

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:这样就完成了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值