回调函数在VUE的应用

Posted 2023-04-06

参考技术A 1.执行showConfim方法 deleteUserData为回调函数 dataRow.objid为参数

2.showConfim事件执行带callbackFunc方法和param参数

3.创建VUE template里有OK方法

4.执行OK方法 执行callbackFunc回调函数事件（实际上执行的是deleteUserData方法） 参数为param

5.执行deleteUserData方法 接口传输参数 objid

vue中this在回调函数中的使用

this在各类回调中使用:

如果是普通函数是没法使用的

所以需要先将this.变量赋值给新的变量,然后才能在回调函数中使用

例如:
refund: function (id) {
      if (!this.url.refund) {
        this.$message.error("请设置url.refund属性!")
        return
      }
      var that = this;
      this.$confirm({
        title: "确认退款",
        content: "是否要进行退款?",
        onOk: function () {
          putAction(that.url.refund, { "id": id }).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.loadData();
            } else {
              that.$message.warning(res.message);
            }
          });
        }
      });
    },

如果是箭头函数式可以使用的

下面的这个例子只是参考,并不代表this.$confirm就是这么使用,具体参考ant的文档
下面的例子只是代表,箭头函数可以使用this
efund: function (id) {
      if (!this.url.refund) {
        this.$message.error("请设置url.refund属性!")
        return
      }
      this.$confirm({
        title: "确认退款",
        content: "是否要进行退款?",
        onOk: () => {
          putAction(that.url.refund, { "id": id }).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.loadData();
            } else {
              this.$message.warning(res.message);
            }
          });
        }
      });
    },