在原生微信小程序中会遇到这么一个问题:
view 嵌套 view,发现被嵌套的view标签点击时候无法传输数据
index.wxml:
//父view标签,bindtap点击事件listClick,使用data-的方式进行数值传输
<view wx:for={{ list }} wx:key="id" wx:for-item="item"
bindtap="listClick"
data-params="{{ item }}"
style="width: 100%; height: 100rpx">
//子view标签
<view class="children"
style="width: 100rpx; height:50rpx; background: #000">
我是子view
</view>
</view>
index.js:
listClick(e) {
//取出传输的data-params值
//data-params定义的值将以键值对的参数存储在在view标签中,位置是e.target.dateset
const {
params
} = e.target.dateset
console.log(e, params, '-------------------->')
}
点击父view中时,console点击事件,打印出携带的item数据,能触发点击事件,但是没法携带data-数据
view的的原始事件绑定不互通性,点击到子view标签时,打印出undefined
解决措施:子view标签中也增加data-params参数,将数据再一次注入进事件中
index.wxml
//父view标签,bindtap点击事件listClick,使用data-的方式进行数值传输
<view wx:for={{ list }} wx:key="id" wx:for-item="item"
bindtap="listClick"
data-params="{{ item }}"
style="width: 100%; height: 100rpx">
//子view标签
//子标签中也注入参数
<view class="children"
data-params="{{ item }}"
style="width: 100rpx; height:50rpx; background: #000">
我是子view
</view>
</view>
如此data-携带的参数边无误了