2 つの uniapp ボタンのメソッド名は同じです

モバイル アプリケーションの普及に伴い、クロスプラットフォーム開発のニーズがますます高まっており、uniapp は Vue.js と小規模プログラムをベースとしたクロスプラットフォーム開発フレームワークとして開発者に愛されています。しかし、最近 uniapp を使用してアプリケーションを開発しているときに、2 つのボタンのメソッド名が同じであるため、一方のボタンが対応するメソッドをトリガーできないという問題に遭遇しました。

1. 問題の説明

uniapp を通じて開発されたアプリケーションには、異なるメソッドをトリガーする必要がある 2 つのボタンがありますが、以下に示すように、メソッド名は同じです。

上記のコードでは、2 つのボタンのメソッド名は submitHandler となっていますが、このとき「Submit」ボタンをクリックするとメソッドが正常にトリガーされますが、「Reset」ボタンをクリックするとメソッドがトリガーされません。

2. 原因分析

この問題に対処するには、まずコンポーネントの再利用という概念を明確にする必要があります。 uniapp では、コンポーネントは複数回再利用でき、使用されるたびに新しいインスタンスが作成されます。たとえば、上記のコードでは、両方のボタンが同じメソッドを使用するため、2 つのボタンは同じインスタンスも使用します。

Vue.js では、コンポーネント内のメソッド名が一意でない場合、Vue.js はこれらのメソッドを 1 つのメソッドにマージし、このメソッドが呼び出されるときにそのうちの 1 つのメソッドだけが呼び出されます。 uniapp では、コンポーネント内のメソッド名が一意でない場合、uniapp はこれらのメソッドを 1 つのメソッドにマージしません。各メソッドは個別に存在しますが、同じインスタンスが使用されるため、いずれかのメソッドが実行されると、他のメソッドは同じ名前は実行できなくなります。

3. 解決策

上記の理由分析に基づいて、これら 2 つのメソッドに異なる名前を付けるだけで解決策を見つけることができます。

<template>
  <view>
    <button class="btn" @tap="submitHandler">提交</button>
    <button class="btn" @tap="submitHandler">重置</button>
  </view>
</template>

<script>
  export default {
    methods: {
      submitHandler() {
        console.log('提交');
      }
    }
  }
</script>

上記のコードでは、この問題を解決できるように、元の submitHandler メソッドをresetHandler メソッドに変更しました。

4. 概要

この問題を解決することで、uniapp の実装が Vue.js とは異なることがわかり、それがいくつかの奇妙な問題を引き起こしています。したがって、uniapp を使用するときは、これらの詳細に注意し、メソッドに一意の名前を付けるなど、Vue.js のいくつかのベスト プラクティスに従う必要があります。この記事が皆さんのお役に立てれば幸いです。

以上が2 つの uniapp ボタンのメソッド名は同じですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。