Let’s talk about how to use this and that in uniapp

Uniapp is a cross-platform development framework based on the development technology of Vue.js and WeChat applet, which enables writing once and running on multiple terminals. In Uniapp, this and that are two variables that developers often use to obtain different objects in different situations.

This keyword refers to the instance of the current component. Use this to directly access the properties and methods in the current component. For example, in the component's methods, you can access the component's data object through this, as shown below:

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

In the above code, this.message is a data attribute in the component, and the method showMessage accesses the message through this properties and print the output.

that is a temporary object used to save the value of this inside the function. In some cases, this inside the function does not point to the instance of the current component. In this case, you can use that to save the value of this for continued use inside the function.

For example, when using uni.request to initiate a request to the server, since the pointer of this has changed, you need to use that to save the instance of the current component. The example is as follows:

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;
                }
            })
        }
    }
}

In the above In the code, since this in the callback function of uni.request is no longer an instance of the current component, you need to use that to save the instance of the current component so that you can continue to access and modify the data in the component.

In short, the use of this and that is very important in Uniapp development. Developers need to clearly know their purpose and usage scenarios in order to develop efficient, stable and reliable applications.

The above is the detailed content of Let’s talk about how to use this and that in uniapp. For more information, please follow other related articles on the PHP Chinese website!