uniapp 如何获取this对象

在uniapp开发中，如何在各个生命周期和自定义方法中正确获取this对象？比如在onLoad、methods里有时会出现this指向undefined或改变的情况，应该如何处理这种作用域问题？有没有通用的解决方案来确保始终能访问到当前页面的this实例？

2 回复

在uniapp中，this对象可直接在Vue组件的方法、生命周期函数中使用。
若在回调函数（如setTimeout、接口请求success）中丢失this，可用箭头函数或提前保存this：

let that = this;
uni.request({
  success: res => {
    that.data = res.data;
  }
});

或使用箭头函数保留上下文。


在 UniApp 中，this 对象通常指当前 Vue 组件实例，用于访问组件的 data、methods、生命周期等。以下是获取和正确使用 this 的方法及注意事项：

1. 在普通方法或生命周期中

在 methods、created、mounted 等选项中，直接使用 this 即可：

export default {
  data() {
    return {
      message: 'Hello UniApp'
    }
  },
  mounted() {
    console.log(this.message); // 直接访问 data
    this.showMessage(); // 调用方法
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
}

2. 在箭头函数中

箭头函数继承父作用域的 this，无需额外处理：

methods: {
  fetchData() {
    setTimeout(() => {
      console.log(this.message); // 正确指向组件实例
    }, 1000);
  }
}

3. 在普通函数中（如定时器、事件）

若在普通函数（如 setTimeout）中，this 可能丢失，需提前保存引用：

methods: {
  handleClick() {
    const self = this; // 保存 this
    setTimeout(function() {
      console.log(self.message); // 通过 self 访问
    }, 1000);
  }
}

4. 使用 bind 方法

通过 bind 绑定 this：

methods: {
  init() {
    setTimeout(function() {
      console.log(this.message);
    }.bind(this), 1000);
  }
}

注意事项：

  • 避免在回调中直接使用 this：在 UniApp 的 API 回调（如 uni.request）中，若未使用箭头函数，需按上述方法处理。
  • 自定义组件引用：通过 this.$refs.xxx 获取子组件实例。

常见问题：

若 this 为 undefined，检查是否在非 Vue 上下文中（如独立函数）。确保在 Vue 组件选项内使用。

通过以上方法，可正确获取和使用 this 对象。

回到顶部