wepy repeat标签循环渲染bug解决

记录一个最近使用wepy开发微信小程序的使用repeat循环渲染的坑点

wepy中使用了模板的概念,意味着同一个组件多次使用会共享实例,也就是说repeat渲染出来的多个子组件会共享同一份状态,就会造成了下面所说的情况

//父组件
        for="{{subjectFinal.finish}}" key="index" index="index" item="item">
          "item" :isFinished.sync="true"/>
        
//子组件
.....
     methods = {
    togle(e) {
      // todo 循环渲染出来的组件共享一个实例。
      this.show = !this.show;
    }
  };
  .....

子组件的show控制这个子组件的是否展示的状态,当我们绑定了点击事件之后,点击其中一个子组件。全部几个用repeat渲染出来的子组件都会同时消失或者显示,而不是我们只想点击的那个改变。

正确解决办法之一:
用一个数据状态再父组件记录每个子组件的显示与否,建立一个事件监听子组件返回来的信息更新数组对应小标的状态,再把这个状态给子组件即可。

//父
.....
  events = {
    "showchange": (index) =>{
      this.shows[index] = !this.shows[index];
    }
  }
.....
        for="{{finishSubject}}" key="index" index="index">
          "item" :isFinished="true" :show.sync="shows[index]"/>
        
//子
  methods = {
    togle(e) {
            this.$emit("showchange",this.$index);
    }
  };

还有就是wepy中,props是会合并到data的

你可能感兴趣的:(前端框架)