vue中this失效问题

客官°小女子只卖身不卖艺 2023-09-27 13:58 108阅读 0赞

**目录**

1.示例代码

2.说明

3.解决方案

--------------------

### 1.示例代码 ###

/** 删除按钮操作 */
        handleDelete(row) {
          debugger
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除国内低值货物入区主表编号为"' + ids + '"的数据项？').then(function () {
            debugger
            console.log(this);
            return delStorageInMaster(this.ids);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          });
        },

### 2.说明 ###

点击confirm的确认按钮之后，执行function方法中的内容，如果在方法内容要使用data中定义的一个变量，使用this.ids进行引用时，发现此时的this是undefined，无法直接进行引用，原因是因为

回调函数的内部的this并非指向当前的vue实例。

### 3.解决方案 ###

(1)在方法执行之前存一下this，例

/** 删除按钮操作 */
        handleDelete(row) {
          let _that = this;
          this.$modal.confirm('是否确认删除国内低值货物入区主表编号为"' + _that.ids + '"的数据项？').then(function () {
            return delStorageInMaster(_that.ids);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          });
        },

(2)使用箭头函数，then后面不使用function，使用箭头函数

/** 删除按钮操作 */
        handleDelete(row) {
          this.$modal.confirm('是否确认删除国内低值货物入区主表编号为"' + this.ids + '"的数据项？').then(() => {
            return delStorageInMaster(this.ids);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          });
        },

(3)使用的变量存放在新的变量中，使用this.ids时，将其存放在ids变量中，后续处理不再使用this进行使用，而直接使用ids

/** 删除按钮操作 */
        handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除国内低值货物入区主表编号为"' + ids + '"的数据项？').then(function () {
            return delStorageInMaster(ids);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          });
        },

4总结

箭头函数出现在es6，箭头函数里面没有this对象，此时的this对象指的是是外层的 this 对象，所以入如果在函数中要引用外面的this对象，推荐使用箭头函数。