Kedua-dua nama kaedah butang uniapp adalah sama

Dengan populariti aplikasi mudah alih, keperluan untuk pembangunan merentas platform menjadi semakin mendesak, dan uniapp, sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js dan program mini, disukai oleh pembangun. Walau bagaimanapun, apabila saya menggunakan uniapp untuk membangunkan aplikasi baru-baru ini, saya menghadapi masalah: nama kaedah kedua-dua butang adalah sama, jadi salah satu butang tidak boleh mencetuskan kaedah yang sepadan.

1. Penerangan Masalah

Dalam aplikasi yang dibangunkan melalui uniapp, terdapat dua butang yang perlu mencetuskan kaedah yang berbeza, tetapi nama kaedahnya adalah sama, seperti yang ditunjukkan di bawah:

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

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

Dalam kod di atas, nama kaedah bagi dua butang adalah submitHandler Pada masa ini, mengklik butang "Serah" boleh mencetuskan kaedah seperti biasa, tetapi mengklik butang "Tetapkan Semula" tidak boleh mencetuskan kaedah.

2. Analisis Punca

Untuk menangani masalah ini, pertama sekali kita perlu menjelaskan konsep, iaitu penggunaan semula komponen. Dalam uniapp, komponen boleh digunakan semula beberapa kali dan tika baharu dibuat setiap kali ia digunakan. Contohnya, dalam kod di atas, kedua-dua butang menggunakan kaedah yang sama, jadi kedua-dua butang itu juga menggunakan contoh yang sama.

Dalam Vue.js, jika nama kaedah dalam komponen tidak unik, Vue.js akan menggabungkan kaedah ini menjadi satu kaedah dan hanya satu kaedah akan dipanggil apabila kaedah ini dipanggil. Dalam uniapp, jika nama kaedah dalam komponen tidak unik, maka uniapp tidak akan menggabungkan kaedah ini ke dalam satu kaedah Setiap kaedah wujud secara berasingan, tetapi kerana contoh yang sama digunakan, apabila salah satu kaedah dilaksanakan , kaedah lain dengan kaedah tersebut. nama yang sama tidak boleh dilaksanakan lagi.

3. Penyelesaian

Berdasarkan analisis sebab di atas, kita boleh menghasilkan penyelesaian: hanya berikan dua kaedah ini nama yang berbeza.

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

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

Dalam kod di atas, kami menukar kaedah submitHandler asal kepada kaedah resetHandler, supaya masalah ini dapat diselesaikan.

4. Ringkasan

Melalui penyelesaian masalah ini, kita dapat melihat bahawa pelaksanaan uniapp adalah berbeza daripada Vue.js, yang membawa kepada beberapa masalah pelik. Oleh itu, apabila menggunakan uniapp, kita perlu memberi perhatian kepada butiran ini dan mengikuti beberapa amalan terbaik Vue.js, seperti memberi kaedah nama unik. Saya harap artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Kedua-dua nama kaedah butang uniapp adalah sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!