uni-number-box @change 传递参数

本文介绍了如何在JavaScript中使用`bindChange`函数绑定义务处理事件,以及如何捕获并打印$event和item参数。
@change="bindChange($event,item)"
bindChange(e,item){
	console.log(e)
	console.log(item)
}
### 如何在uni-app中阻止`uni-number-box`组件的事件冒泡 在uni-app开发中,`uni-number-box`是一个常用的数字输入框组件。如果需要阻止该组件的点击事件冒泡到父级组件,可以通过设置`hover-stop-propagation`属性来实现[^2]。 以下是一个具体的实现方式: #### 代码示例 ```html <template> <view class="container" @click="handleParentClick"> <!-- 添加 hover-stop-propagation 属性 --> <uni-number-box class="number-box" hover-class="number-box-active" hover-stop-propagation @change="handleChange" /> </view> </template> <script> export default { methods: { handleParentClick() { console.log("父级组件点击事件触发"); }, handleChange(value) { console.log("数字框值发生变化:", value); } } }; </script> <style lang="scss"> .container { padding: 20px; font-size: 14px; line-height: 24px; } .number-box { width: 100px; height: 30px; background-color: #f0f0f0; } .number-box-active { background-color: #ccc; } </style> ``` #### 关键点解析 - `hover-stop-propagation`属性的作用是阻止子组件的点击事件冒泡到父级组件。当用户点击`uni-number-box`时,父级组件的点击事件将不会被触发[^2]。 - 在上述代码中,`uni-number-box`组件绑定了`@change`事件,用于监听数字框值的变化。同时,父级组件绑定了`@click`事件,用于处理父级点击逻辑。 - 如果没有设置`hover-stop-propagation`,点击`uni-number-box`时会同时触发父级组件的点击事件。通过添加该属性,可以有效避免这种问题。 #### 注意事项 - 确保`hover-stop-propagation`属性仅适用于`view`、`button`等支持`hover-class`的组件。如果`uni-number-box`本身不支持该属性,可以通过外层包裹一层`view`并设置该属性来实现。 - 如果需要更复杂的事件控制,可以结合JavaScript中的`event.stopPropagation()`方法,在`@click`事件中手动阻止事件冒泡。 --- ### 示例代码(手动阻止事件冒泡) ```html <template> <view class="container" @click="handleParentClick"> <view class="box" @click.stop="handleChildClick"> <uni-number-box class="number-box" @change="handleChange" /> </view> </view> </template> <script> export default { methods: { handleParentClick() { console.log("父级组件点击事件触发"); }, handleChildClick() { console.log("子组件点击事件触发,但不会冒泡到父级"); }, handleChange(value) { console.log("数字框值发生变化:", value); } } }; </script> <style lang="scss"> .container { padding: 20px; font-size: 14px; line-height: 24px; } .box { width: 150px; height: 50px; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center; } .number-box { width: 100px; height: 30px; } </style> ``` 在上述代码中,使用了`@click.stop`修饰符来手动阻止事件冒泡[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值