uni-app click.stop编译为微信小程序之后无法传参

uni-app click.stop编译为微信小程序之后无法传参

# 产品分类
uniapp/小程序/微信

# PC开发环境操作系统
Windows

# PC开发环境操作系统版本号
10

# HBuilderX类型
正式

# HBuilderX版本号
3.4.7

# 第三方开发者工具版本号
1.05.2204180

# 基础库版本号
2.24.1

# 项目创建方式
HBuilderX

## 示例代码
```html
<image class='more-handle' [@click](/user/click).stop='showMenu(item.id)' src='./../image/more-handle.png'></image>

操作步骤

<image class='more-handle' [@click](/user/click).stop='showMenu(item.id)' src='./../image/more-handle.png'></image>

预期结果

能传参且有阻止事件冒泡的效果

实际结果

不能传参，报错，阻止冒泡事件未验证

bug描述

我发现click.stop编译之后的代码没有方法名和参数，这应该是编译有问题。使用过click.preventDefault和click.stopPropagation，编译之后的代码有方法名和参数，但是没有阻止冒泡事件


更多关于uni-app click.stop编译为微信小程序之后无法传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

经测试未复现问题，可以正常传参。试试在Hello Uni-app中是否正常

更多关于uni-app click.stop编译为微信小程序之后无法传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也发现这个bug，以前版本没发现

我的写法是：
<view
class=“entry_ways_item”
data-item=“item” @tap.stop=“toExpanse($event, item)” v-for="(item, index) in importListNew"
key=“index” > <view class="item_icon_box"> <image class="item_icon" mode="aspectFit" :src="item.icon" /> </view> <view class="entry_ways_item_title"> {{ item.label }} </view> </view>

toExpanse(e, item) { // #ifdef MP-WEIXIN item = e.currentTarget.dataset.item // #endif }

同样的bug，@click.stop如果是在v-for中的话就无法传参，会把item当成this.item处理。 低版本的hbuilderx编译应该没问题，目前是3.1.6版本，出现了这个问题。

这个问题解决了吗，我也遇到这个问题了

我的hbuilder是3.7.11.20230427

如果是在循环里面处理事件，记得把key的值写好，这边就是由于一个疏忽传了个undefined进去，导致小程序里面事件的传参和v-model都出问题了

在 uni-app 中，[@click](/user/click).stop 是一个事件修饰符，用于阻止事件冒泡。当你在 uni-app 中编写代码时，[@click](/user/click).stop 会被编译为微信小程序中的 catchtap 事件，因为微信小程序中没有直接对应的事件修饰符。

然而，catchtap 事件在微信小程序中默认不会传递参数。如果你需要在 catchtap 事件中传递参数，可以通过以下方式解决：

1. 使用 data-* 属性传递参数

你可以在元素上使用 data-* 属性来传递参数，然后在事件处理函数中通过 event.currentTarget.dataset 来获取这些参数。

<template>
  <view [@click](/user/click).stop="handleClick" :data-param="myParam">点击我</view>
</template>

<script>
export default {
  data() {
    return {
      myParam: 'Hello, World!'
    };
  },
  methods: {
    handleClick(event) {
      const param = event.currentTarget.dataset.param;
      console.log(param); // 输出: Hello, World!
    }
  }
};
</script>

2. 使用 bindtap 和 catchtap 结合

如果你需要同时阻止事件冒泡和传递参数，可以结合使用 bindtap 和 catchtap。

<template>
  <view [@click](/user/click)="handleClick" :data-param="myParam" [@click](/user/click).stop="handleStop">点击我</view>
</template>

<script>
export default {
  data() {
    return {
      myParam: 'Hello, World!'
    };
  },
  methods: {
    handleClick(event) {
      const param = event.currentTarget.dataset.param;
      console.log(param); // 输出: Hello, World!
    },
    handleStop(event) {
      // 阻止事件冒泡
      event.stopPropagation();
    }
  }
};
</script>

3. 使用 $emit 传递参数

如果你在组件中使用 [@click](/user/click).stop，可以通过 $emit 来传递参数。

<template>
  <view [@click](/user/click).stop="handleClick">点击我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', 'Hello, World!');
    }
  }
};
</script>

在父组件中监听这个事件：

<template>
  <my-component [@click](/user/click)="handleClick"></my-component>
</template>

<script>
export default {
  methods: {
    handleClick(param) {
      console.log(param); // 输出: Hello, World!
    }
  }
};
</script>
回到顶部