27-自定义组件-子向父传递数据

发布时间:2022-07-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了27-自定义组件-子向父传递数据脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

我们原先写的父组件向子组件传递数据。我们查看子组件中的js代码:

27-自定义组件-子向父传递数据

我们的子组件的data中没有数据,但是我们通过this.data却获取了里面的数据,为什么? 因为这样我们获取的其实是properties中从父组件接收过来的数据

27-自定义组件-子向父传递数据

然后循环完毕后,我们又把tabs设置回了data中。就相当于 data: { tabs } 这样写看起来没问题,其实不然。 我们刚开始,是在首页这里,当我们点击原创后,我们希望原创的isActive变成true,而首页的isActive变成false。我们查看控制台的AppData,发现首页的isActive还是true

27-自定义组件-子向父传递数据

因为父组件中的data数据并没有改变

处理如下: 我们把点击的index从子组件传递给父组件,然后在父组件中进行循环,把父组件相应的isActive进行改变即可。

修改步骤: 1、

27-自定义组件-子向父传递数据

2、在父组件的wxml中,对子组件进行引用的地方绑定事件(注意bind后面的事件名,与自定义组件的trriger中的要保持一致)

27-自定义组件-子向父传递数据

3、在父组件的js文件中编写事件代码

27-自定义组件-子向父传递数据

完毕!!!

脚本宝典总结

以上是脚本宝典为你收集整理的27-自定义组件-子向父传递数据全部内容,希望文章能够帮你解决27-自定义组件-子向父传递数据所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: