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


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 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
详解javascript高级定时器
Dec 31 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
python实现批量改文件名称的方法
2015/05/25 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
linux面试题参考答案(8)
2016/04/19 面试题
社会实践心得体会
2014/01/03 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
慈善晚会策划方案
2014/05/14 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
法定代表人身份证明书
2015/06/18 职场文书
深度学习详解之初试机器学习
2021/04/14 Python