前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序--页面与组件之间如何进行信息传递和函数调用

微信小程序--页面与组件之间如何进行信息传递和函数调用

作者头像
Kindear
发布2020-12-31 14:29:13
2K0
发布2020-12-31 14:29:13
举报
文章被收录于专栏:算法与数据结构

微信小程序--页面与组件之间如何进行信息传递和函数调用

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

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

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

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

代码语言:javascript
复制
"usingComponents": {
    "sc":""
 }

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

代码语言:javascript
复制
<sc
list="{{list}}"
>
</sc>
代码语言:javascript
复制
组件中的监听器写法如下,当页面中的`list`值每次发生变化,都会触发`observer`监听器,打印出变化值。
代码语言:javascript
复制
properties: {
    list:{
      type:Array,
      observer: function (newVal, oldVal){
        console.log(newVal)
      }
    }
}

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

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

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

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

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

代码语言:javascript
复制
ComponentListener(e){
    let info = e.detail;
 }

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

代码语言:javascript
复制
<sc
bind:listener="ComponentListener"
> 
</sc>

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

代码语言:javascript
复制
 this.triggerEvent('listener',{func,tid});
3.页面如何调用组件内的函数

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

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

代码语言:javascript
复制
<comment-bottom id="commentBottom"></comment-bottom>

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

代码语言:javascript
复制
this.commentBottom = this.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();
4.组件如何调用页面内的函数

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

代码语言:javascript
复制
<component bind:componentfunc="pagefun"></component>

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

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

代码语言:javascript
复制
var allpages = getCurrentPages();//获取全部页面数据
var nowpage = allpages[allpages.length - 1].data;//获取当前页面的数据。
var nowpage = allpages[allpages.length - 1];//获取页面,包括数据和方法

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


结语:

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

参考文件 微信小程序开发技巧总结 (一)-- 数据传递和存储

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序--页面与组件之间如何进行信息传递和函数调用
    • 1.页面如何向组件传数据
      • 2.组件如何向页面传数据
        • 3.页面如何调用组件内的函数
          • 4.组件如何调用页面内的函数
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档