微信小程序将自定义组件获取的值传递给页面

最新推荐文章于 2023-07-08 14:14:05 发布
最新推荐文章于 2023-07-08 14:14:05 发布
阅读量1.9k 收藏 7
点赞数 2
分类专栏： 微信小程序开发 文章标签： 前端开发 组件通信 数据传递 事件绑定 输入值获取
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_h86/article/details/123371343
版权

例如，在页面中的搜索框是自定义的组件，现在用户在搜索框中输入内容，然后我需要将该内容从组件从传递给页面。

第一步，给组件的input框绑定一个点击事件
在这里插入图片描述
第二步，在组件js中获取用户输入的值
在这里插入图片描述
第三步，给页面组件标签绑定一个点击事件
在这里插入图片描述
第四步，组件向页面传值
在这里插入图片描述
第五步，页面获取传递的值
在这里插入图片描述

zmuy
关注
专栏目录
微信小程序开发中的数据分享和数据传递
m0_75244442的博客
08-10 584
数据分享和数据传递在微信小程序开发中非常常见，它们可以用于不同页面之间的数据传递，在用户之间共享数据等等。在本文中，我将详细介绍如何在微信小程序中实现数据分享和数据传递的几种方法，并给出相关的代码案例。在这个案例中，页面A通过URL参数传递了数据给页面B，页面A和页面B通过全局数据共享获取全局数据，页面A使用Storage本地数据存储保存了数据，页面A通过数据劫持实现了数据共享和双向绑定。通过阅读本文，你应该对微信小程序开发中的数据分享和数据传递有了更深入的理解，并且能够灵活运用这些方法来实现业务需求。
微信小程序-如何获取用户表单控件中的值
itclanCoder
10-01 4052
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
微信小程序自定义组件传值 页面和组件相互传数据操作示例
11-26
本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作。分享给大家供大家参考，具体如下： 要想在组件中调到页面中的方法，并且想要组件中传数据到页面去，emmmm，可以酱紫： 用组件事件 triggerEvent！ 首先，在页面中定义组件 ，json文件中记得加上： { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后，index.wxml~ index.wxml ... <user-btn show="{{userShow}}" bind:showTab="showT
微信小程序：页面获取自定义组件中的值
selectDele的博客
08-19 7690
1、在component下新建一个test 2、在test.wxml中写 3、在test.js中写 4、在/pages/index/index.json中加入 5、在index.wxml中写 6、在index.js中写 7、运行
微信小程序获取组件中的所有方法和值
weixin_43365995的博客
02-11 6180
在写微信小程序的时候我们有的时候会遇到一些父页面调用子组件的方法 这个时候我们就要用到一个属性了this.selectComponent() 这个方法使用注意事项 1.引入的组件要加上id如： <selectBox id='selectBox' bind:traCheckedNum="checkNum" selectData="{{position}}" styleclas...
微信小程序组件传值
2201_75442970的博客
02-09 473
微信小程序组件传值
微信小程序——组件与界面之间传值
Yua_H的博客
04-19 403
问题描述 实例： 有一个用户信息的组件my，my有一个子组件auth用于用户实名认证，auth组件中要将用户输入的真实姓名返回到my界面中并显示。 思路： auth返回my组件时不会重新渲染my组件，因此需要将auth组建中获取到的用户输入姓名传递到index页面（距离my组件最近的界面）,再由index界面将数据传到my组件中实现数据的传递 方法一： auth组件中获取用户输入的姓名，将姓名数据通过页面帧的方法传递到index界面，index界面调用my组件，将姓名数据传递到my组件中 auth.js:
微信小程序给上个页面赋值
1
07-28 1017
当前页面这样写execute_day是上个页面的值,直接把当前页面的值赋给execute_day然后用wx.navigateback()这个方法回到上一页 getpagedate: function (params) { var thispages = getCurrentPages(); //当前页面 var navPage = thispages[thispages.length - 2]; //上一页 navPage.setData({
微信小程序-自定义组件-遮罩层
05-05
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...
详解微信小程序自定义组件的实现及数据交互
10-16
微信小程序自定义组件是开发小程序时经常会用到的一个特性，它允许开发者封装可复用的UI组件，提高代码的重用性和项目的可维护性。本文将深入探讨如何实现微信小程序的自定义组件以及如何在组件间进行数据交互。 ...
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
10-17
微信小程序自定义组件的实现与数据传递是一个非常实用的技术话题，它涉及到微信小程序开发的高级应用。以下是对相关知识点的详细介绍： ### 微信小程序自定义组件实现方法 微信小程序的自定义组件类似于网页前端...
微信小程序之自定义组件的实现代码（附源码）
01-20
下面我们将详细探讨如何实现微信小程序的自定义组件，包括创建组件、编写模板代码、样式文件、业务逻辑以及如何在页面中使用自定义组件。 **创建文件并声明组件** 创建自定义组件与创建微信小程序页面类似，需要`...
微信小程序自定义组件--日历组件
06-05
微信小程序自定义组件是开发微信小程序时非常关键的一部分，它允许开发者扩展小程序的功能，提高代码复用性，提升开发效率。本案例中的“日历组件”是一个轻量级的组件，专为微信小程序设计，提供了丰富的自定义可能...
小程序-页面获取组件里面的值
weixin_45631100的博客
04-21 770
页面获取组件里面的值 组件要写 id 方便获取对象 //wxml <searchBar id="searchBar"></searchBar> 主要方法： this.selectComponent("#组件的ID"); //js chooseOk:function(e){ // 获取组件对象 var searchBar=this.selectComponent("#searchBar"); console.log(searchBar) //取值 var name=t
微信小程序——组件的封装(暴露方法出去，在外部调用)
我是我
06-24 3002
1.应用场景 我们在开发时，封装一个公共底部组件，该组件拥有两个部分，第一部分是电话报名，第二部分是表单报名。我们需要在很多页面中使用这个组件，并且电话报名和表单报名逻辑是不同的，只有样式是相同的。 此时，我们可以令这个组件暴露出两个方法供外部调用。 2.组件封装 html文件 comp.wxml <!--底部报名表单组件--> <view class="tapplyfooter"> <view class="tapplyfooter-left"> ...
微信小程序-组件
最新发布
program_due的博客
07-08 1870
可在父组件里调用 this.selectComponent("id或者class选择器")，获取子组件的示例对象，从而直接访问子组件任意数据和方法。在小程序组件中，生命周期函数可以直接定义在Component 构造器的第一级参数中，可以在lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）应用场景：例如有些情况下，某些 data 中的字段不会展示在界面上，也不会传递给其他组件，仅仅在当前。作为组件的封装者，不知道组件的某一部分要填写什么内容，此时，可以把这部分用一个插槽占位，插槽是占位符。
【微信小程序】【项目实战】四、页面和组件之间的传值
m0_55546349的博客
04-26 1080
页面和组件之间的传值 1.页面===>组件 例如：在/pages/index/index中引用了组件中的card组件,要如何将index中的数据传递到card中去呢？ 3. 引用组件（之前说过） 4. 传值 > cardData="{{cardItem}}"----就是传递到组件的数据，写在引用的组件标签中。 > cardData：传递的数据变量名 > cardItem：传递的数据值 /pages/index/index <!--index.wxml--> &lt
【微信小程序】页面跳转、组件自定义、获取页面参数值
m0_55394328的博客
12-04 2542
哈喽大家好，本期是微信小程序专栏第十七期。本期主要内容是页面跳转、组件自定义、获取页面参数值。每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~要想实现点击文章就跳转到相应的文章详情页面，就需要给每个文章设置一个id，然后绑定这个id，如下，绑定postId：我们可以看到，每篇文章的id号都被绑定在该文章的view容器上。通过获取当前文章的postId。event事件对象是由MINA框架在调用onTapToDetail函数时传递的参数，其中，代表事件绑定的当前组件。dataset对象。
微信小程序:组件间的传值
湾流~ 的博客
02-22 2391
组件间的传值 子传父 子组件页 使用triggerEvent方法第一个参数为自定义事件名称,第二个想要传递到父页面的值 this.triggerEvent('quitEvent',e.detail.value); 父组件页 在父页面通过事件名绑定一个新方法gainedValue <quit id="quit" bind:quitEvent="gainedValue"></quit> 父页面 gainedValue:function(e){ console.log("子组件
微信小程序自定义组件：模态弹窗实战解析
"微信小程序自定义模态弹窗组件的创建和使用方法" 在微信小程序开发过程中，有时会遇到微信自带的`showModal`弹窗无法满足复杂需求的情况，例如标题字数限制、内容区只能展示文字而不能插入组件等。为了解决这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值