聊聊uniapp中this和that的使用方法

百变鹏仔 4周前 (11-20) #uniapp

文章标签使用方法

uniapp是一个跨平台的开发框架，基于vue.js和微信小程序的开发技术，实现了一次编写，多端运行。在uniapp中，this和that是开发者经常使用的两个变量，用于在不同的情况下获取不同的对象。

this关键字是指当前组件的实例，使用this可以直接访问当前组件中的属性和方法。比如，在组件的methods中，通过this可以访问组件的data对象，如下所示：

export default {    data() {        return {            message: 'Hello World'        }    },    methods: {        showMessage() {            console.log(this.message);        }    }}

在上述代码中，this.message就是组件中的一个数据属性，方法showMessage通过this访问message属性并打印输出。

that是一个临时对象，用于在函数内部保存this的值。在一些情况下，函数内部的this并不是指向当前组件的实例，此时可以使用that来保存this的值，以便在函数内部继续使用。

比如，在使用uni.request向服务器发起请求时，由于this的指向已经改变，此时需要使用that来保存当前组件的实例，示例如下：

export default {    data() {        return {            items: []        }    },    methods: {        loadData() {            //保存当前组件的实例            let that = this;            uni.request({                url: 'http://localhost:8080/getData',                success(res) {                    //在此处使用that来访问items属性，而不是this                    that.items = res.data;                }            })        }    }}

在上述代码中，由于uni.request的回调函数中的this已经不再是当前组件的实例，所以需要使用that来保存当前组件的实例，以便继续访问和修改组件中的数据。

总之，在Uniapp开发中，this和that的使用是非常重要的，开发者需要清楚地知道它们的用途和使用场景，以便开发高效、稳定和可靠的应用程序。

文章推荐

聊聊uniapp中this和that的使用方法

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项