使用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,期待尽快修复。

 

Logo

前往低代码交流专区

更多推荐