微信小程序页面与组件之间信息传递与函数调用

这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容

  1. 页面如何向组件传数据
  2. 组件如何向页面传数据
  3. 页面如何调用组件内的函数
  4. 组件如何调用页面内的函数

1.页面如何向组件传数据

最常用，最规范的方式，设置数据监听器observer。

​ 假设在页面内引入了组件sc

"usingComponents": {
    "sc":""
 }

​ 想要配置一个监听器用来监听页面中数据list的变化，组件在页面中的写法如下：

<sc
list="{{list}}"
>
</sc>

组件中的监听器写法如下，当页面中的`list`值每次发生变化，都会触发`observer`监听器，打印出变化值。

properties: {
    list:{
      type:Array,
      observer: function (newVal, oldVal){
        console.log(newVal)
      }
    }
}

​ 同理，除了动态传值以外，这种方式也可以直接传入静态值，即不需要调用obeserver监听器。在组件中可以直接使用this.properties.*来获取properties中的各个值(*代表各个属性值的名称)。

2.组件如何向页面传数据

​ 既然组件可以设置监听器用来监听页面数据变化，用来达到数据传递的效果，页面同样可以使用监听器，来监听组件触发的信息传送。

仍然以上面的组件为例，如何向页面中传送信息？

​ 在页面中配置组件监听器

ComponentListener(e){
    let info = e.detail;
 }

​ 组件选择事件并绑定该监听器

<sc
bind:listener="ComponentListener"
>
</sc>

​ 从组件中往页面传入输入只需要在组件中触发对应事件，e.detail就是传过去的数据

 this.triggerEvent('listener',{func,tid});

3.页面如何调用组件内的函数

​ 假设我们引入并使用了一个组件comment-bottom，组件内有函数handleCloseInput，需要在某个逻辑中触发。

想要使用组件内的函数，必须为组件配置一个唯一id，这样就可以在页面中通过dom操作选中组件并调用组件中的函数。

<comment-bottom id="commentBottom"></comment-bottom>

组件中的函数在页面中的调用逻辑如下：

this.commentBottom = this.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();

4.组件如何调用页面内的函数​

上面向页面传数据的方式，实际上就是调用了页面中的函数。我们可以这样理解该逻辑，将该用法理解为一个函数映射。

<component bind:componentfunc="pagefun"></component>

​ 当使用trigger触发componentfunc时，通过bind:这个函数映射关系，就会触发页面中的pagefunc。

​ 其次，调用页面内的函数，还可以通过页面栈的方式，组件并不占用页面的栈空间，因此在组件中使用getCurrentPages就可以获得对应页面的数据和方法。

var allpages = getCurrentPages();//获取全部页面数据
var nowpage = allpages[allpages.length - 1].data;//获取当前页面的数据。
var nowpage = allpages[allpages.length - 1];//获取页面，包括数据和方法

​ 这部分内容出自我的一篇文章，我会把地址放在参考文件中。

结语：

组件和组件之间的数据传递和组件与页面之间并没有太大区别，组件中也可以嵌套组件。

参考文件

微信小程序开发技巧总结 （一）-- 数据传递和存储

到此这篇关于微信小程序页面与组件之间信息传递与函数调用的文章就介绍到这了,更多相关微信小程序页面与组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

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

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

  • 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了.我们今天来讲一讲.在小程序的webview里实现微信支付功能.因为微信不允许在小程序的webview里直接调起微信支付.所以我们这节课就要涉及到小程序和webview的交互了. 老规矩先看效果. 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来. https://v.qq.com/x/page/t0913ipr

  • 微信小程序使用自定义组件导航实现当前页面高亮

    最近开发小程序,需要做一个导航,导航可以通过template写出来,但是这个项目需要在导航中处理一些逻辑,做成组件更方便些. 首先新建header文件夹,里面新建对应的js.json.wxml.wxss文件. <!-- 公共头部组件 --> <view class='headers'> <navigator open-type="redirectTo" class='logo' url="../index/index" hover-cl

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

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

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 微信小程序页面调用自定义组件内的事件详解

    这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent&quo

  • 微信小程序页面与组件之间信息传递与函数调用

    这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调用页面内的函数 1.页面如何向组件传数据 最常用,最规范的方式,设置数据监听器observer. ​ 假设在页面内引入了组件sc "usingComponents": { "sc":"" } ​ 想要配置一个监听器用来监听页面中数据list的变化,组件在页面中的写法如下: <sc list="

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序开发之组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为template使用,可以方便计算各种属性而不是在wxml引入wxs 在日常的小程序开发组件过程中,我一般会遵循如下几个规则: 1.样式独立 & 依赖独立 在组件开发过程中,组件可以依赖于全局样式,组件在引入时,使用该页面样式和全局样式共同渲染. options: { addGlobalClass: tru

  • 微信小程序实现给嵌套template模板传递数据的方式总结

    本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use

  • 微信小程序 页面之间传参实例详解

    微信小程序 页面之间传参实例详解

    微信小程序 传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序使用video组件播放视频功能示例【附源码下载】

    微信小程序使用video组件播放视频功能示例【附源码下载】

    本文实例讲述了微信小程序使用video组件播放视频功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video> ② index.js Page({ data:{ // text:"这是一个页面" }, vide

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

随机推荐