使用wepy有一段时间了,期间没遇到什么明显的坑,我一度觉得腾讯开发的wepy就是比mpvue好,写的贼爽快,具体的优点我就不累赘叙述。
但是一旦遇到坑,那就是爆炸的,现在开始总结遇到的坑。
repeat循环遍历组件,传参bug。
在wepy中组件循环只能用repeat大家都知道,但是当你写好一个组件,全局到处都用得到的时候,你肯定非常爽快,但是一旦循环这个组件,你就发现传参的bug。简单来说,对repeat之中的组件遍历,组件参数调用的是repeat中的item.数组 才会出现的问题。
看代码:
<repeat for="{{resData}}" key="index" index="index" item="item">
<tsbox :list.sync="item.数组中的参数"></tsbox>
</repeat>
没错,数组中的参数,这样传不过去。
//父组件
data = {
resData: [
{msg: '123'},
{msg: '456'},
...
]
}
<repeat for="{{resData}}" key="index" index="index" item="item">
<tsbox :list.sync="item"></tsbox>
</repeat>
//子组件
props = {
list: {
type: Array,
default: []
}
}
//onload接收
onLoad(){
console.log(this.list);//{msg: '123'}
}
没错能传一组数据,没错就一组,甭管你怎么纠结,只能这样了。
解决方案1 :
repeat再套一层,resdata传参数组再套一层数组。试过不好用,性能要求太高,例子不添加了。
解决方案2 :
直接传数组过去,
data = {
resData: [
{msg: '123'},
{msg: '456'},
...
]
}
<tsbox :list.sync="resData"></tsbox>
这样可以把数组传过去,
在子组件内给容器套一层 block 遍历
<block wx:for="{{list}}" wx:key="id" wx:for-item="item">
...
<block>
没错,解决方案就是以后但凡是要遍历的组件,传的数据还是不同的一组组数据,在组件内部用template或者block包裹一层自行遍历。
小结 : 或许是程序思想的关系,百度并未找到相关的解答方案,可能一般人都会在子组件遍历不会遇到这种情况,我也是刚好要遍历四个组件,根据数据判断展示哪一个才遇到这个bug的,不得不说,wepy在这里应该算是有一个不小的Bug,但是官方并未回复is,期待尽快修复。