微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用
这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容
- 页面如何向组件传数据
- 组件如何向页面传数据
- 页面如何调用组件内的函数
- 组件如何调用页面内的函数
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];//获取上一页面,包括数据和方法
这部分内容出自我的一篇文章,我会把地址放在参考文件中。
结语:
组件和组件之间的数据传递和组件与页面之间并没有太大区别,组件中也可以嵌套组件。
参考文件
微信小程序--页面与组件之间如何进行信息传递和函数调用的更多相关文章
- 微信小程序——页面中调用组件方法
我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序-02-项目文件之间配合和调用关系
微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
随机推荐
- 深入浅出之mysql索引--上
当着小萌新之际,最近工作中遇到了mysql优化的相关问题,然后既然提到了优化,很多像我这样的小萌新不容置喙,肯定张口就是 建立索引 之类的. 那么说到底,索引到底是什么,它是怎么工作的?接下来就让我和 ...
- 【mq读书笔记】mq事务消息
关于mq食物以什么样的方式解决了什么样的问题可以参考这里: https://www.jianshu.com/p/cc5c10221aa1 上文中示例基于mq版本较低较新的版本中TransactionL ...
- VisualStudio C++使用汇编函数
Visual Studio编写C++代码使用汇编函数 新建空项目 新建如下源文件 ;test.asm ;测试函数 三个数相加 ;.386 .model flat, c ;public test_ .c ...
- oracle set oracle_sid=xxxxxx
本地有多个实例,在cmd 输入 set oracle_sid=xxxxx 来指定要连接的实例 sqlplus xxxx/xxxx@1.1.1.1.1/sid 连接数据库
- Django----Modelviewset继承
1.modelviewset 认证.权限.限流.序列化.分页.过滤.排序 modelviewset的应用场景是: 1.主要应用于数据接口 2.对数据库的增删改查 3.在视图函数中没有很多业务逻辑需要来 ...
- 【NOIP2015模拟11.4】JZOJ2020年8月6日提高组T2 最优交换
[NOIP2015模拟11.4]JZOJ2020年8月6日提高组T2 最优交换 题目 题解 题意 有一个长度为\(n\)的正整数 最多可以进行\(k\)次操作 每次操作交换相邻两个位置上的数 问可以得 ...
- 20190713_windows 2008 R2在启动网站时报错_另一个程序正在使用此文件,进程无法访问
80端口已经被占用了; 换个端口就好了, 如果你是云服务器, 记得控制台也要开放对应的端口
- 第7.22节 Python中使用super调用父类的方法
第7.22节 Python中使用super调用父类的方法 前面章节很多地方都引入了super方法,这个方法就是访问超类这个类对象的.由于super方法的特殊性,本节单独谈一谈super方法. 一.su ...
- PyQt(Python+Qt)学习随笔:QListView的resizeMode属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的resizeMode属性用于控制调整视图大小时是否再次排列视图中的数据项,其类型 ...
- PyQt(Python+Qt)学习随笔:gridLayout的layoutHorizontalSpacing和layoutVerticalSpacing属性
layoutHorizontalSpacing和layoutVerticalSpacing属性在Qt Designer中是网格布局(gridLayout)和表单布局(formLayout)都有的属性, ...