微信小程序自定义组件传值 页面和组件相互传数据操作示例


Posted in Javascript onMay 05, 2019

本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作。分享给大家供大家参考,具体如下:

要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫:

用组件事件 triggerEvent!

首先,在页面中定义组件 ,json文件中记得加上:

{
 "usingComponents": {
 "user-btn": "/pages/component/userInfo/userInfo"
 }
},

然后,index.wxml~

index.wxml

...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...

到了组建:

// 与页面衔接 触发页面中的方法并传数据
this.triggerEvent('showTab', res.data);

res.data就是组件中请求到的数据;

回到index.js,他的showTab方法~

showTab:function(e){
  console.log('this is showtabBar');
  console.log(e.detail);
 },

那么这个e.detail就能获取到组件中的res.data的数据啦~

当然 要想从页面中带数据到组件:

譬如刚刚index.wxml中的show,在页面中的index.js可以随意控制userShow的值:

index.wxml

...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...

然后在组建中,便可以这样取到我们从页面中传入的值。

properties: { //对外属性,即如果外部的wxml文件传入数据时,会把数据设置成properties的属性
 'show':{
  type:Boolean,
  value:'',
  observer: function (newVal, oldVal) {
  console.log(newVal)
  }
 },
 },
 ready:function(){
 console.log(this.properties);
 },

好啦  大功告成!

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
详解Vue调用手机相机和相册以及上传
May 05 #Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 #Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
node Buffer缓存区常见操作示例
May 04 #Javascript
JS实现checkbox互斥(单选)功能示例
May 04 #Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
You might like
收音机术语解释
2021/03/01 无线电
php生成N个不重复的随机数实例
2013/11/12 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python实例化对象的具体方法
2020/06/17 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
运动会解说词50字
2014/01/18 职场文书
庆元旦广播稿
2014/02/10 职场文书
科研课题实施方案
2014/03/18 职场文书
学校春季防火方案
2014/06/08 职场文书
工程部岗位职责
2015/02/10 职场文书
个性与发展自我评价
2015/03/06 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang