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


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 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
详解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 使用curl提交json格式数据
2013/06/29 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Django中使用Celery的教程详解
2018/08/24 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
社区食品安全实施方案
2014/03/28 职场文书
责任担保书范文
2014/05/21 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript