微信小程序自定义组件传值 页面和组件相互传数据操作示例
更新时间：2019年05月05日 08:36:25 作者：_zengZeng
这篇文章主要介绍了微信小程序自定义组件传值 页面和组件相互传数据操作,结合实例形式分析了微信小程序常见传值操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作。分享给大家供大家参考，具体如下：
要想在组件中调到页面中的方法，并且想要组件中传数据到页面去，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);
},
好啦 大功告成！
希望本文所述对大家微信小程序开发有所帮助。
相关文章
[蓝色]颜色渐变效果...2006-07-07
cookie 是存储于访问者的计算机中的变量，在这个例子中我们要创建一个存储访问者名字的 cookie,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了javascript编程实现栈的方法,简单说明了栈的概念、特点并结合实例形式分析了javascript栈的定义、入栈、出栈等操作相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序 页面跳转传值实现代码的相关资料,这里分析实现的条件及实例代码，需要的朋友可以参考下2017-07-07
这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细解析了DOM中事件处理概览与原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
在JavaScript中,可以使用HTML5提供的Canvas元素来进行绘图操作,要使用canvas元素,浏览器必须支持html5,Canvas是一个HTML元素,可以通过JavaScript来操作和绘制图形,本文示例实现js和canvas绘制圆形金属质感的诗词高级排版特效2024-09-09
微信小程序最近比较热，今天小编抽空做了一个客服机器人的小程序，下面小编给大家分享微信小程序自动客服功能，需要的朋友参考下吧2017-11-11
JQuery 提供了两种方式来阻止事件冒泡，Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作，下文有个不错的示例，需要的朋友可以参考下2013-11-11
模块化JavaScript的概念尤为强烈，似乎有赶超07年Ajax风潮之趋势2012-03-03
最新评论