【掰开揉碎】深入了解 @tap 和 @click

当我们深入了解 @tap 和 @click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。

事件绑定与触发

事件绑定

在 uni-app 中，通过使用 @ 或 v-on 指令，我们可以绑定事件。@tap 和 @click 都是用于绑定点击事件的指令。

<!-- 使用 @tap 绑定点击事件 -->
<button @tap="handleTap">点击我</button>
 
<!-- 使用 @click 绑定点击事件 -->
<button @click="handleClick">点击我</button>
 
export default {
  methods: {
    handleTap() {
      console.log('handleTap 被触发');
    },
    handleClick() {
      console.log('handleClick 被触发');
    },
  },
};

事件触发

当用户点击按钮时，绑定的事件处理函数（如 handleTap 或 handleClick）将会被触发。

@tap 与 @click 的区别

在 uni-app 中，@tap 和 @click 实际上是等效的，都可以用于绑定点击事件。它们的选择主要是取决于开发者的个人偏好或项目的规范。

1. 语法差异:

• @tap 是 uni-app 的指令语法。
• @click 是 Vue.js 的指令语法，但在 uni-app 中也可以使用。

2. 一致性:

• 如果你同时使用了 Vue.js 或其他框架，可能更倾向于使用 @click 以保持一致性。

3. 底层实现:

• 在底层，它们都是通过监听点击事件来触发相应的方法。