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

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

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的使用方法的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:详细介绍JavaScript怎么实现哈希表
下一篇:聊聊什么是虚拟dom?vue为什么采用vdom?

发表评论

关闭广告
关闭广告