Les deux noms de méthode du bouton Uniapp sont les mêmes

Avec la popularité des applications mobiles, le besoin de développement multiplateforme devient de plus en plus urgent. En tant que framework de développement multiplateforme basé sur Vue.js et des mini-programmes, uniapp est apprécié des développeurs. Cependant, lorsque j'utilisais uniapp pour développer une application récemment, j'ai rencontré un problème : les noms de méthode des deux boutons sont les mêmes, donc l'un des boutons ne peut pas déclencher la méthode correspondante. Pourquoi est-ce le cas ?

1. Description du problème

Dans une application développée via uniapp, il y a deux boutons qui doivent déclencher des méthodes différentes, mais les noms des méthodes sont les mêmes, comme indiqué ci-dessous :

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

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

Dans le code ci-dessus, les noms des méthodes de les deux boutons sont identiques. Il s'agit de submitHandler. À ce stade, cliquer sur le bouton "Soumettre" peut déclencher la méthode normalement, mais cliquer sur le bouton "Réinitialiser" ne peut pas déclencher la méthode.

2. Analyse des causes

Pour résoudre ce problème, nous devons d'abord clarifier un concept, à savoir la réutilisation des composants. Dans uniapp, un composant peut être réutilisé plusieurs fois et une nouvelle instance est créée à chaque utilisation. Par exemple, dans le code ci-dessus, les deux boutons utilisent la même méthode, donc les deux boutons utilisent également la même instance.

Dans Vue.js, si les noms de méthodes dans le composant ne sont pas uniques, Vue.js fusionnera ces méthodes en une seule méthode, et une seule des méthodes sera appelée lorsque cette méthode sera appelée. Dans uniapp, si les noms de méthodes dans le composant ne sont pas uniques, alors uniapp ne fusionnera pas ces méthodes en une seule méthode. Chaque méthode existe séparément, mais comme la même instance est utilisée, lorsque l'une des méthodes est exécutée, d'autres méthodes avec le. le même nom ne peut plus être exécuté.

3. Solution

Sur la base de l'analyse des raisons ci-dessus, nous pouvons trouver une solution : donnez simplement à ces deux méthodes des noms différents.

<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>

Dans le code ci-dessus, nous avons modifié la méthode submitHandler d'origine en méthode resetHandler, afin que ce problème puisse être résolu.

4. Résumé

En résolvant ce problème, nous pouvons voir que l'implémentation d'uniapp est différente de Vue.js, ce qui entraîne des problèmes étranges. Par conséquent, lorsque nous utilisons uniapp, nous devons prêter attention à ces détails et suivre certaines bonnes pratiques de Vue.js, telles que donner des noms uniques aux méthodes. J'espère que cet article pourra aider tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!