Tencent / wepy

小程序组件化开发框架
https://wepyjs.gitee.io/wepy-docs/
Other
22.48k stars 3.06k forks source link

使用repeat循环渲染自定义组件时,无法实现数据的双向绑定 #1025

Closed GeniusFunny closed 5 years ago

GeniusFunny commented 6 years ago

wepy 1.X版本,使用repeat对自定义组件进行循环渲染时,无法将父组件的data双向绑定到子组件上,即repeat不支持props,computed,key值等等,在控制台打印为undefined;而原生小程序的wx:for只支持原生组件。 解决方案是: 使用repeat将父组件的data动态绑定(:sync.item)到子组件上,在子组件上添加一个事件发射器(this.$emit()),最后在父组件添加对应的events,从而达到数据的'伪'双向绑定。即修改数据的具体代码放在父组件上,而子组件拥有是否修改数据的控制权。 注:若无法为子组件绑定key值,可以为子组件绑定id,从而解决事件发射器的参数问题) 肯定有更好的方法,大家一起分享分享

Choicelin commented 6 years ago

twoway设置为true不行么

GeniusFunny commented 6 years ago

@Choicelin 无法在子组件props里获取到父组件传递下来的属性,在控制台打印的结果为undefined,所以子组件自身无法修改父组件传递下来的属性,所以把twoWay设置为true也没用。你可以试试

Choicelin commented 6 years ago

👌

Choicelin commented 6 years ago

你具体的版本是1.几

GeniusFunny commented 6 years ago

@Choicelin 我的版本是1.7

Gcaufy commented 6 years ago

1.7.2的版本中支持了原生组件,大家可以试一下这个版本,应该能解决repeat下的一些问题:

安装使用:

npm install wepy-cli@1.7.2-alpha1 -g
npm install wepy@1.7.2-alpha1 --save
wepy build --no-cache

文档说明:https://github.com/Tencent/wepy/blob/component/docs/md/doc.md#%E7%BB%84%E4%BB%B6 迁移参考:https://github.com/wepyjs/wepy-wechat-demo/commit/5f84a3aed82547d7db4eb816f5c83f5ad35eba65

coolhwm commented 6 years ago

@Gcaufy 1.7.2中循环渲染使用wx:for吗?

Gcaufy commented 6 years ago

@coolhwm 1.7.2中,循环 wx:for 和repeat应该都是一样的效果

5468sun commented 6 years ago

@Gcaufy 1.7.2-alpha2 问题未解决

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. 因为这个 Issue 最近没有任何有效回复,所以被自动标记为了stale。 如果在未来7天依旧没有任何激活操作,那么该 Issue 将会被自动关闭。 感谢您的提问。

eslizn commented 5 years ago

我也遇到这个问题了,需要在子组件手动触发this.$parent.$apply()后才能同步 要命的是,开发者工具里是正常的,在真机才会触发这个问题