缘由最近写公司业务代码的时候遇到这样一个需求，我写这块部分需要新增加一个弹窗，进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的$confirm方式可以自定义html部分的。但是我的内容其实非常少。如果用传统的直接写弹窗的二次确认方式缺点1：业务代码会变得很多缺点2：我本身是在别人已经做完的基础上新增一个接口拦截，参数是传递给另一个函数。可以使用弹窗组件就需要定义取消和关闭函数，我必须把原本组装好的数据丢给全局。然后在确定之后，从全局再拿回来丢回去。如果我的组件封装可以像$confirm的回调函数方式或者primose方式一样，那么参数就不存在丢来丢去，函数也可以少写点。代码能少写一半。本身其实在以前是写过类似的封装的，那会是写小程序的时候。但是太久没有写，忘记了。心里不甘心，然后周六回过来试了试。成功了涉及知识1、数据的脏数据检测2、回调函数3、vue的数据传值方式第一种：数据监听方式这里使用elementUI的弹窗来简化下原理来自于我最早期的这部分：juejin.im/post/5d6c87…一种数据监听的方式1、弹窗部分代码

<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="colse">取 消</el-button>
      <el-button type="primary" @click="colse">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    confirm() {
      this.dialogVisible = true;
    },
    colse() {
      this.dialogVisible = false;
      if (this.callback != null) {
        this.callback(false);
      }
    },
    coloseWin(callback) {
      this.callback = callback;
    }
  }
};
</script>

2、使用部分

<template>
  <div class="test">
    <el-button @click="ceshi">测试</el-button>
    <DialogConfirm ref="DialogConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  components: {
    DialogConfirm: () =>
      import("@/backstage/components/dialog_confirm/dialogConfirm.vue")
  },
  methods: {
    ceshi() {
      const Confirm = this.$refs["DialogConfirm"];
      Confirm.confirm();
      Confirm.coloseWin(e => {
        console.log(e);
      });
    }
  }
};

第二种：promise方式
1、弹窗部分改为这样

<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="colse">取 消</el-button>
      <el-button type="primary" @click="queding">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    confirm() {
      this.dialogVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    colse() {
      this.dialogVisible = false;
      this.resolve(111);
    },
    queding() {
      this.dialogVisible = false;
      this.reject(true);
    }
  }
};
</script>

2、使用部分代码

<template>
  <div class="test">
    <el-button @click="ceshi">测试</el-button>
    <DialogConfirm ref="DialogConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  components: {
    DialogConfirm: () =>
      import("@/backstage/components/dialog_confirm/dialogConfirm.vue")
  },
  methods: {
    ceshi() {
      const Confirm = this.$refs["DialogConfirm"];
      Confirm.confirm()
        .then(e => {
          console.log(e);
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>复制代码