前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wepy repeat标签循环渲染bug解决

wepy repeat标签循环渲染bug解决

作者头像
ACK
发布2020-01-14 17:07:09
1.4K0
发布2020-01-14 17:07:09
举报
文章被收录于专栏:flytam之深入前端技术栈

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

wepy中使用了模板的概念,意味着同一个组件多次使用会共享实例,也就是说repeat渲染出来的多个子组件会共享同一份状态,就会造成了下面所说的情况
代码语言:javascript
复制
//父组件
        <repeat for="{{subjectFinal.finish}}" key="index" index="index" item="item">
          <SubjectCard :item.sync="item" :isFinished.sync="true"/>
        </repeat>
//子组件
.....
     methods = {
    togle(e) {
      // todo 循环渲染出来的组件共享一个实例。
      this.show = !this.show;
    }
  };
  .....

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

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

代码语言:javascript
复制
//父
.....
  events = {
    "showchange": (index) =>{
      this.shows[index] = !this.shows[index];
    }
  }
.....
        <repeat for="{{finishSubject}}" key="index" index="index">
          <SubjectCard :item.sync="item" :isFinished="true" :show.sync="shows[index]"/>
        </repeat>
//子
  methods = {
    togle(e) {
            this.$emit("showchange",this.$index);
    }
  };

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wepy中使用了模板的概念,意味着同一个组件多次使用会共享实例,也就是说repeat渲染出来的多个子组件会共享同一份状态,就会造成了下面所说的情况
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档