微信小程序中组件传值
嗨喽大家好，我是老黑。最近完成了小程序中的刻度尺功能，总结一波。首先是这个刻度尺是一个单独的子组件，我是在父组件中引用的这个子组件。然后每次父组件使用这个子组件的时候这个子组件都可以拿到父组件中最新的数据来当，默认值。这个过程是可谓是一波三折。。
首先是这个刻度尺案例网上的案例比较少，不大好找。找了好久找到了一个合适的。在这过程中花费时间最多的是父组件传过值去后，然后刻度尺这个子组件中获取到，默认显示这个值。刚开始我是直接在子组件中直接调用接口来获得数据，这样来做极其极其的不方便，感觉也是违背了组件功能的初衷。一波三折。最好给整出来了。直接上效果图看一下。
话不多说，直接上代码。
第一步：首先需要刻度尺这个组件
第二步：需要在父组件中的json中引入这个组件。
第三步：在父组件中的wxml文件中引入这个子组件。其中这个active就是从data中获取到的数据后，然后把这个数据传递给刻度尺这个子组件。
第四步：在子组件中properties中接收一下这个属性的值。
这样就可以子组件中接受到这个父组件传过来的值。直接可以和在data中那样用就行，this.proterties.active这是和data等价的。
好了，这样就可以了，是不是很简单，当是我好好看了看文档这样写了之后值还是传不过来，卡了我好长时间。当时，我在父组件中把串的值写死之后是可以传过来的，但是想要从data中来获取值再显示就无法显示。最后在大佬的指点下才知道了原因，因为请求后台的数据的时候，会有一个网络请求时的耗时，所以才导致数据还没有请求回来，但是组件就调用了，就导致了无法把值传过来。
刚开始想的是加个计时器，但是不妥，因为不能保证网络环境是怎末样的，有可能会卡掉。也想到通过promise来解决，但是也没能好好的实现。最后我想可以通过组件中的生命周期来调用这个组件，当数据请求成功后在调用这个组件。于是就在子组件中加了下面的代码：
在ready中来执行初始化这个组件的方法，就可以实现了想要的效果。
记录一下，通过这个功能让我更好的了解了组件的作用，以及如何父组件和子组件中传值。如果有不对的地方还请小伙伴们多多指正。
最后来一句鼓励的话吧，哈哈哈。
没有人能够回到过去重新开始，但都可以从现在开始书写一个全新不同的结局。
微信小程序中组件传值相关推荐
- 微信小程序父子组件传值问题
微信小程序父子组件传值问题 把自己碰到的问题或者学到的东西在这里总结,慢慢积累 在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...
- 微信小程序中组件的使用
微信小程序中组件的使用: 微信小程序中组件定义在项目根目录下components文件夹下,在页面使用的时候需要在页面的json文件中声明,如 父组件向子组件传值及子组件向父组件传值: 父组件wxml中 ...
- 微信小程序系列4——传值详解
前言 在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值.回调.代理.通知等.而在微信小程序中,传值的方式和Android和iOS的方式有一定的异同. 微信小程序使用的数据传值方式 ...
- 微信小程序中的共享数据 : globalData
和vue中的vuex作用相同,都是用于设置给所有页面都可以使用的数据的. globalData在app.js中,它是一个对象,在里面设置要使用到的共享数据. 我们在其他页面要使用globalData中 ...
- 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
- 微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言 在微信小程序中,用户回退页面触发更新数据的操作,一般都是在 页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
- 微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题 由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...
- html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
- 微信小程序中的页面文件和组件
页面文件 页面构造器 JS文件 页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面 接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
- 微信小程序中自定义组件
文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
最新文章
- (1)Adapter适配器(ArrayAdapter、SimpleAdapter、BaseAdapter)
- linux命令---查找文件中的内容
- 详细设计 存储分配_10k+点赞的 Spring Boot 后台管理系统竟然出了详细教程！爱了！...
- 同济大学计算机直博,放弃直博浙江大学，选择保研同济大学！理性的他，做出这样的选择...
- 一千行 MySQL 学习笔记
- BookStack在线文档管理系统 v2.9
- getQueryString方法使用
- java数据导出ex_大数据面试题（三）
- POJ 3580 SuperMemo 伸展树
- Thrift 的原理和使用
- java并发学习--线程池（一）
- 计算机截屏无法保存,win7电脑自带截图软件保存图片失败怎么办？
- 一个通过网络转换Ico到Png图片的小小程序(Ico2Png)
- arduino智能闹钟_要写一个Arduino的电子闹钟程序，板子是Arduino UNO,和一个实时钟的芯片DS1307，开发环境是Arduino-1.0.2...
- It's only too late if you decide it is. Get busy living, or get busy dying（转）
- 今日学习在线编程题：弓形半径
- MySQL备份工具之xtrabackup
- 2021年重庆高考成绩分数段查询,2021重庆高考总成绩一分一段表出炉
- 海康视频插件启动过程中出现跨域问题has been blocked by CORS policy
- linux 安装插件报错：Loaded plugins: fastestmirror