首頁 > web前端 > uni-app > 聊聊uniapp中this和that的使用方法

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

PHPz
發布: 2023-04-19 14:33:12
原創
1922 人瀏覽過

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的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板