uni-app 自定义组件使用click事件编译成微信小程序异常

uni-app 自定义组件使用click事件编译成微信小程序异常

操作步骤：

  • 自定义组件使用click事件

预期结果：

  • 期望应该是bindtap

实际结果：

  • 结果却是bindclick

bug描述：

  • 期望应该是bindtap，结果却是bindclick

图片

Image 1 Image 2

项目信息

信息类别 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 1.06.240
基础库版本号 3.4.3
项目创建方式 HBuilderX

更多关于uni-app 自定义组件使用click事件编译成微信小程序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

没看懂 能详细描述一下问题嘛？ 你这写的不就是click吗？编译是正确的啊

更多关于uni-app 自定义组件使用click事件编译成微信小程序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bindtap事件才是微信小程序的点击事件，而实际变成了bindclick，点击是无法生效的

回复 3***@qq.com: 可你写的不就是click吗？你要用tap你就直接写tap 不就可以了嘛

回复 3***@qq.com: @tap == bindtap @click == bindclick

那你绑定事件的时候别用@click，用@tap

在 uni-app 中，自定义组件使用 click 事件编译成微信小程序时可能会遇到一些问题。这通常是因为微信小程序的自定义组件事件机制与 uni-app 的机制有所不同。以下是一些常见的解决方案和注意事项：

1. 使用 @tap 代替 @click

微信小程序中的点击事件是 tap，而不是 click。因此，在自定义组件中，你可以尝试使用 @tap 代替 @click。

<template>
  <view @tap="handleClick">点击我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件触发');
    }
  }
}
</script>

2. 使用 @click.native

如果你确实需要使用 @click 事件，可以尝试使用 .native 修饰符，以确保事件绑定到原生 DOM 元素上。

<template>
  <view @click.native="handleClick">点击我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件触发');
    }
  }
}
</script>

3. 使用 $emit 触发父组件事件

如果你在自定义组件中需要触发父组件的 click 事件，可以在子组件中使用 $emit 来触发自定义事件。

<!-- 子组件 -->
<template>
  <view @tap="handleTap">点击我</view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      this.$emit('click');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @click="handleClick"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('父组件点击事件触发');
    }
  }
}
</script>

4. 检查微信小程序的自定义组件事件机制

微信小程序的自定义组件事件机制与 uni-app 有所不同。确保你在自定义组件中正确使用了 triggerEvent 来触发事件。

// 子组件逻辑
Component({
  methods: {
    handleTap() {
      this.triggerEvent('click');
    }
  }
});

5. 使用 uni.$emit 和 uni.$on

如果你需要在跨组件之间传递事件，可以使用 uni.$emit 和 uni.$on 来实现全局事件通信。

// 子组件
methods: {
  handleTap() {
    uni.$emit('customClick', { message: '点击事件触发' });
  }
}

// 父组件
mounted() {
  uni.$on('customClick', (data) => {
    console.log('接收到点击事件:', data.message);
  });
}
回到顶部