vue中this失效问题

// 报错例子如下
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
        console.log(this); // 这个this为undefined
        // 逻辑代码
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

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

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

2 解决办法 

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

    handleDelete(row) {
     

let _that = this;

      this.$modal.confirm('是否确认删除编号为"' + _that.ids + '"的数据项？').then(function () {

        // 逻辑代码
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

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

   /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除主表编号为"' + ids + '"的数据项？').then(() {
// 逻辑代码
      }).then(() => {

        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

3 总结

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