ホームページ > ウェブフロントエンド > uni-app > uniappでのあれこれの使い方について話しましょう

uniappでのあれこれの使い方について話しましょう

PHPz
リリース: 2023-04-19 14:33:12
オリジナル
1931 人が閲覧しました

Uniapp は、Vue.js と WeChat アプレットの開発技術をベースにしたクロスプラットフォーム開発フレームワークで、一度作成すれば複数の端末で実行できます。 Uniapp では、this と that は、開発者がさまざまな状況でさまざまなオブジェクトを取得するためによく使用する 2 つの変数です。

このキーワードは、現在のコンポーネントのインスタンスを参照します。これを使用して、現在のコンポーネントのプロパティとメソッドに直接アクセスします。たとえば、コンポーネントのメソッドでは、以下に示すように、 this を通じてコン​​ポーネントのデータ オブジェクトにアクセスできます。

export default {
    data() {
        return {
            message: 'Hello World'
        }
    },
    methods: {
        showMessage() {
            console.log(this.message);
        }
    }
}
ログイン後にコピー

上記のコードでは、 this.message はコンポーネントのデータ属性であり、メソッド showMessage はアクセスします。このプロパティを通じてメッセージを取得し、出力を印刷します。

これは、関数内で this の値を保存するために使用される一時オブジェクトです。関数内の this が現在のコンポーネントのインスタンスを指していない場合がありますが、この場合、これを使用して this の値を保存し、関数内で引き続き使用できます。

たとえば、uni.request を使用してサーバーへのリクエストを開始する場合、このポインターが変更されているため、それを使用して現在のコンポーネントのインスタンスを保存する必要があります。例は次のとおりです。

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 は現在のコンポーネントのインスタンスではなくなっているため、それを使用して現在のコンポーネントのインスタンスを保存する必要があります。コンポーネント内のデータに引き続きアクセスして変更できます。

つまり、Uniapp 開発ではあれやこれやの使用が非常に重要であり、開発者は効率的で安定した信頼性の高いアプリケーションを開発するために、目的と使用シナリオを明確に理解する必要があります。

以上がuniappでのあれこれの使い方について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート