微信小程序 - 组件传值给调用页面

演示如下(可以ctrl+鼠标放大或者下载GIF图片)

1. 先组件定义事件“checkbox”(组件内事件)

2. 调用页面调用它需要加bind:事件名 = 调用页面事件名(bind即绑定调用组件“onCheckbox”,)

3. 通过 this.triggerEvent(‘onCheckbox‘, value); 来绑定事件进行传值

4. 通过调用页面onCheckbox打印组件传输过来的值e.detail

原文地址:https://www.cnblogs.com/cisum/p/10324628.html

时间: 2024-10-02 18:30:51

微信小程序 - 组件传值给调用页面的相关文章

微信小程序携参跳转页面

微信小程序携参跳转页面 前页面 首先在前一个页面写一个按钮,点击按钮跳转到新的页面. <button bindtap="tiaozhuan">跳转到news</button> 写一个方法,让他跳转到其他页面顺便带一个参数. // 跳转页面 tiaozhuan(){ wx.navigateTo({ url: '../news/news?id=wjw1014', }) }, 上边的代码是 在点击按钮的时候跳转到news页面,传进去一个参数id值是wjw1014. 新

微信小程序组件化(上)

小程序对组件化的"支持"情况 微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件.而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. 猜其原因可能有两方面: 从小程序开放的API来看,它去除了DOM和BOM,视图与数据层交互采用简单的单向数据绑定和事件绑的形式.可能其初衷是想降低开发难度和学习门槛,尽量减少概念. 小程序推出时间不到一年,这些功能可能还在完善中. 自定义组件的难点 微信的组件

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链

微信小程序 POST传值跳坑

1.post请求 wx.request(OBJECT) wx.request 发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 官网上描述 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的 header , header 中不能设置 Referer method String 否 默认为 GET,有效值:OPTIONS, GET, HEAD, POST

微信小程序开发--路由切换,页面重定向

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为

微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 wx.switchTab({url: '...',}) 来实现. 那么,我们反过来,如何从含有tabbar的页面跳转到一个不含有/隐藏了tabbar的页面呢? 在尝试了上述的两个API后发现不起作用,wx.switchTab({url: '...',}) 倒是可以在有tabbar的页面之间跳转,但无法

微信小程序组件通信

父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 <子组件 prop名字='值'></子组件> 2.子父通信 在子组件对应的元素身上绑定原生事件 <button bindtap = 'tapHandler'></button> // 在函数中,触发自定义事件 tapHandler(){ this.triggerEven