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


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 相关文章推荐
json 定义
Jun 10 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
基于javascript实现放大镜特效
Dec 03 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP入门速成教程
2007/03/19 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php排序算法实例分析
2016/10/17 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
[原创]pip和pygal的安装实例教程
2017/12/07 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
对python模块中多个类的用法详解
2019/01/10 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python logging模块的使用详解
2020/10/23 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
一年级学生评语
2014/04/23 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年协会工作总结
2014/11/22 职场文书
会计稽核岗位职责
2015/04/13 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python