uni-app两个按钮方法名一样

随着移动端应用的普及，跨平台开发的需求也越来越迫切，而uniapp作为一款基于Vue.js和小程序的跨平台开发框架，备受开发者们的钟爱。但是，最近在使用uniapp开发应用的时候，遇到了一个问题：两个按钮的方法名一样，导致其中一个按钮无法触发相应的方法，这是为什么呢？

一、问题描述

通过uniapp开发的应用中，有两个按钮需要触发不同的方法，但是方法名一样，如下所示：

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

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

在上面的代码中，两个按钮的方法名都是submitHandler，这时候点击“提交”按钮可以正常触发方法，但是点击“重置”按钮却无法触发方法。

二、原因分析

针对这个问题，我们首先需要明确一个概念，那就是组件复用。在uniapp中，一个组件可以被多次复用，并且每次使用的时候都新创建一个实例。比如在上面的代码中，这两个按钮都使用了同一个方法，因此这两个按钮使用的也是同一个实例。

在Vue.js中，如果组件中的方法名不唯一，那么Vue.js会将这些方法合并成一个方法，并且在调用这个方法的时候只会调用其中一个方法。而在uniapp中，如果组件中的方法名不唯一，那么uniapp不会将这些方法合并成一个方法，每个方法都单独存在，但是由于使用的是同一个实例，因此当其中一个方法被执行之后，其它的同名方法就不能再被执行了。

三、解决方案

根据上面的原因分析，我们可以得出解决方案：只需要给这两个方法起不同的名字即可。

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

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

在上面的代码中，我们将原来的submitHandler方法改成了resetHandler方法，这样就可以解决这个问题了。

四、总结

通过这个问题的解决，我们可以看到uniapp的实现方式与Vue.js有所不同，导致了一些奇怪的问题。因此，在使用uniapp的时候，我们需要注意这些细节，并且遵循Vue.js的一些最佳实践，比如给方法起唯一的名字等。希望本文能够帮助到大家。

这篇好文章是转载于：学新通技术网