嗨喽大家好,我是老黑。最近完成了小程序中的刻度尺功能,总结一波。首先是这个刻度尺是一个单独的子组件,我是在父组件中引用的这个子组件。然后每次父组件使用这个子组件的时候这个子组件都可以拿到父组件中最新的数据来当,默认值。这个过程是可谓是一波三折。。
首先是这个刻度尺案例网上的案例比较少,不大好找。找了好久找到了一个合适的。在这过程中花费时间最多的是父组件传过值去后,然后刻度尺这个子组件中获取到,默认显示这个值。刚开始我是直接在子组件中直接调用接口来获得数据,这样来做极其极其的不方便,感觉也是违背了组件功能的初衷。一波三折。最好给整出来了。直接上效果图看一下。
话不多说,直接上代码。
第一步:首先需要刻度尺这个组件
第二步:需要在父组件中的json中引入这个组件。
第三步:在父组件中的wxml文件中引入这个子组件。其中这个active就是从data中获取到的数据后,然后把这个数据传递给刻度尺这个子组件。
第四步:在子组件中properties中接收一下这个属性的值。
这样就可以子组件中接受到这个父组件传过来的值。直接可以和在data中那样用就行,this.proterties.active这是和data等价的。
好了,这样就可以了,是不是很简单,当是我好好看了看文档这样写了之后值还是传不过来,卡了我好长时间。当时,我在父组件中把串的值写死之后是可以传过来的,但是想要从data中来获取值再显示就无法显示。最后在大佬的指点下才知道了原因,因为请求后台的数据的时候,会有一个网络请求时的耗时,所以才导致数据还没有请求回来,但是组件就调用了,就导致了无法把值传过来。
刚开始想的是加个计时器,但是不妥,因为不能保证网络环境是怎末样的,有可能会卡掉。也想到通过promise来解决,但是也没能好好的实现。最后我想可以通过组件中的生命周期来调用这个组件,当数据请求成功后在调用这个组件。于是就在子组件中加了下面的代码:
在ready中来执行初始化这个组件的方法,就可以实现了想要的效果。
记录一下,通过这个功能让我更好的了解了组件的作用,以及如何父组件和子组件中传值。如果有不对的地方还请小伙伴们多多指正。
最后来一句鼓励的话吧,哈哈哈。
没有人能够回到过去重新开始,但都可以从现在开始书写一个全新不同的结局。
微信小程序中组件传值
版权声明:本文为Laohei0101原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。