全国咨询热线:18720358503

个人小程序开发教程_微信小程序自界说组件传值

类别:行业新闻 发布时间:2021-01-07 浏览人次:

微信小程序自定义组件传值 页面和组件相互传数据操作示例       这篇文章主要介绍了微信小程序自定义组件传值 页面和组件相互传数据操作,结合实例形式分析了微信小程序常见传值操作相关实现技巧,需要的朋友可以参考下

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

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

用组件事件 triggerEvent!

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

 "usingComponents": {
 "user-btn": "/ponent/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);

好啦  大功告成!

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


推荐阅读

个人小程序开发教程_微信小程序自界说组件传值

手机微信微信小程序自定部件传值 网页页面和部件互相传数据信息实际操作实例 本文关键详细介绍了手机微信微信小程序自定部件传值 网页页面和部件互相传数据信息实际操作...

2021-01-07
为什么现在的网站设计越来越偏向于扁平化?

谢谢大伙儿关心《为何如今的网站制作越来越越偏重于平扁化?》话题讨论,搜易高新科技()投身公司企业网站建设、网络推广服务1六年,针对《为何如今的网站制作越来越越偏重于平...

2021-01-07
广州凡科互联网科技股份有限公司招聘家装设计

招聘人数:22职位信息1、根据客户的需求,为客户量身定做风格设计、设计方案、图纸绘制、预算编制、主材选择、家具选择、选择等完整家居服务;2、对建筑材料与施工工艺的评估;...

2021-01-07
研发投入力度超华为,收入增320倍

今年第一个工作中日,百度搜索CEO百度李彦宏就发过一封內部电子邮件,向百度搜索同学们们公布,2018企业收益提升1000亿人民币。百度搜索发售1四年来,收益早已猛增320倍! Wind数据信...

2021-01-07
党建微信小程序_怎么使用JavaScript完成栈与行列

怎样应用JavaScript完成栈与序列 本文关键详细介绍了怎样应用JavaScript完成栈与序列。栈和序列是web开发设计中最经常用的二种数据信息构造。绝大部分客户,乃至包含web开发设计工...

2021-01-07
小程序开发:小程序转型升级,打造全新的营销

伴随着互连网时期的来临,传统式实体线店面的市场销售方法越来越越难吸引住消费者消費了。以便扩展市场销售方式,传统式店家竞相根据微信小程序转型发展升級,打造出全新升级...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信