
注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数
这是在用mpvue开发小程序时遇到一个问题,项目需要引用小程序的picker选择器组件,发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件(项目需要实现对一个模块进行点击跳转,同时要求模块内的一个子元素有选择器功能)
开始通过查看vue文档和小程序文档,找到两种方法,分别是vue的.stop阻止冒泡和小程序的catch前缀,但通过测试发现给change事件直接添加.stop或者catch没有用
最后选用了网上搜到的一个折中的方法,给picker选择器另外添加一个点击事件(或者给选择器的父元素添加点击事件),为新加的点击事件添加阻止冒泡方法,使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题
如果大家还有更好的方法,欢迎留言
vue的钩子函数:beforeCreat: 创建前
created: 创建
beforeMount: 挂载前
mounted: 挂载
beforeupdate: 更改前
updated: 更改
beforeDestroy: 销毁前
destroyed: 销毁
小程序的钩子函数:
onLoad: 页面加载
onShow: 页面显示
onReady: 页面初次渲染完成
onHide: 页面隐藏
onUnload: 页面卸载
vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据
vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:
小程序绑定某个变量的值为元素属性时,会用两个大括号括起来
vue使用v-if 和v-show控制元素的显示和隐藏
小程序使用wx-if和hidden控制元素的显示和隐藏
vue使用v-on:event绑定事件,或者使用@event绑定事件,@event.stop阻止事件冒泡
小程序用bindtap(bind+event),或者catchtap(catch+event)绑定事件,阻止事件冒泡
vue中如下:
小程序中如下:
vue中的表单元素上加v-model,然后再绑定data中对应的值
小程序中通过this.setData({key:value})将表单上的值赋值给data中的对应值
vue中需要在触发事件的方法中,把需要传递的数据作为形参传入
小程序中需要将参数作为属性值,绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取,从而完成参数传递
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)