记录一个最近使用wepy开发微信小程序的使用repeat循环渲染的坑点
//父组件
<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渲染出来的子组件都会同时消失或者显示,而不是我们只想点击的那个改变。
正确解决办法之一: 用一个数据状态再父组件记录每个子组件的显示与否,建立一个事件监听子组件返回来的信息更新数组对应小标的状态,再把这个状态给子组件即可。
//父
.....
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的