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

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

要想在组件中调到页面中的方法，并且想要组件中传数据到页面去，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);
 },

好啦  大功告成！

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

赞 (0)

相关推荐

  • 微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

  • 微信小程序实现两个页面传值的方法分析

    本文实例讲述了微信小程序实现两个页面传值的方法.分享给大家供大家参考,具体如下: 需求:发送页面通过url传值,接收页面获取值. 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+nowid, }) 或者发送页面用navigate 组件: <navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据.是动态的,那么可以写成: &

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序页面传值实例分析

    微信小程序页面传值实例分析

    微信小程序页面传值实例分析 最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值 刚开始使用路径传参解决,但是众所周知: 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提交. IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符. firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交. Oper

  • 微信小程序自定义组件封装及父子间组件传值的方法

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序页面间传值与页面取值操作实例分析

    本文实例讲述了微信小程序页面间传值与页面取值操作.分享给大家供大家参考,具体如下: 微信小程序页面间传值 1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值, 实例1: pageSkip :function(){ wx.navigateTo({ url: '/page/login/facte?shopsName='+this.data.shopsName, }) }, 实例2: pageSkip :function(){ wx.navigateTo({ url: '/page

  • 微信小程序 传值取值的几种方法总结

    微信小程序 传值取值的几种方法总结

    微信小程序 传值取值 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l

  • 微信小程序自定义可搜索的picker组件示例详解

    微信小程序自定义可搜索的picker组件示例详解

    PC端开发,组件库是有可搜索的select可用 但是在手机端微信小程序开发的时候,使用select就不太合适了,小程序端的选项一般都是是使用picker 但是,问题又来了,微信小程序官方并没有给我们提供可搜索的Picker 人家没给,那我们就自定义一个呗 别的到没啥,就是感觉交互上有点奇怪 具体效果如下图所示: 废话不多说了,上代码: myPicker.wxml <view class="date-background" hidden="{{flag}}"&g

  • 微信小程序自定义菜单切换栏tabbar组件代码实例

    微信小程序自定义菜单切换栏tabbar组件代码实例

    这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde

  • 微信小程序自定义头部导航栏（组件化）

    微信小程序自定义头部导航栏（组件化）

    本文实例为大家分享了微信小程序自定义头部导航栏的具体代码,供大家参考,具体内容如下 效果图 支持 导航栏自定义背景颜色.背景图片 支持返回文字自定义 支持导航标题自定义 首先在app.json window配置项添加 "window": { "navigationStyle": "custom" } 自定义头部导航栏代码 wxml部分 <view class="cu-custom" style="height:

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

    本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

  • 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

    首先我们在pages文件夹下创建components目录用于存放自定义组件.如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件. 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步. 一.首先把dialog组件的样式写好,并在index页面相应的位置引用.以下就是代码啦(分别为:wxml.wxss.js.json) <view class='wx_dialog_

  • 微信小程序自定义组件与页面的相互传参

    微信小程序自定义组件与页面的相互传参

    目录 1. 自定义组件 官方文档 1.1 创建自定义组件 1.1.1 声明组件 1.1.2 编辑组件 1.2 使用自定义组件 1.3 页面向自定义组件传递数据(父传子) 1.4 组件将事件传给页面(子传父) 1. 自定义组件 小程序允许我们使用自定义组件的方式来构建页面. 官方文档 自定义组件 是不是用的微信的组件感觉很爽啊,如果不够用怎么办? 1.1 创建自定义组件 类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成 1.1.1 声明组件 首先需要在json文件中进行自定义组

  • 详解微信小程序自定义组件的实现及数据交互

    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件 首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建 在callphone.w

  • 微信小程序自定义toast组件的方法详解【含动画】

    微信小程序自定义toast组件的方法详解【含动画】

    本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to

  • 微信小程序自定义组件之可清除的input组件

    最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件. 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏:当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容.并且还可以设置输入框整体样式以及输入框左侧图标. 明确了需求之后,就可以开始着手实现了. 首先,在目标目录下新建一个自定义组件 建好之后,我们需要来设计布局.根据需求来看,我们只需要三个组件:两个image和一个input.

  • 微信小程序自定义select下拉选项框组件的实现代码

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

随机推荐