微信小程序--页面与组件之间如何进行信息传递和函数调用
2020-12-28 23:04
561 查看
微信小程序--页面与组件之间如何进行信息传递和函数调用
这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容
- 页面如何向组件传数据
- 组件如何向页面传数据
- 页面如何调用组件内的函数
- 组件如何调用页面内的函数
1.页面如何向组件传数据
最常用,最规范的方式,设置数据监听器
observer。
假设在页面内引入了组件
sc
"usingComponents": { "sc":"" }
想要配置一个监听器用来监听页面中数据
list的变化,组件在页面中的写法如下:
<sc list="{{list}}" > </sc>
组件中的监听器写法如下,当页面中的`list`值每次发生变化,都会触发`observer`监听器,打印出变化值。
properties: { list:{ type:Array, observer: function (newVal, oldVal){ console.log(newVal) } } }
同理 ad8 ,除了动态传值以外,这种方式也可以直接传入静态值,即不需要调用
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 n 11d8 owpage = allpages[allpages.length - 1].data;//获取当前页面的数据。 var nowpage = allpages[allpages.length - 1];//获取页面,包括数据和方法
这部分内容出自我的一篇文章,我会把地址放在参考文件中。
结语:
组件和组件之间的数据传递和组件与页面之间并没有太大区别,组件中也可以嵌套组件。
参考文件
相关文章推荐
- 【微信小程序】用户首次进入小程序拒绝授权,如何再次调用授权页面,获取用户信息userInfo
- 微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例
- 微信小程序中页面跳转时如何传递一个对象
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
- 微信小程序如何利用getCurrentPages进行页面传值
- GUI程序如何使用控制台输出调试信息[zz][MFC调用win32窗口显示调试信息,使用AllocConsole 函数 ]
- 微信小程序如何使用canvas进行多信息图片拼接(粘贴代码可用)
- uni-app如何在写微信小程序时调用getLocation接口获取用户位置信息
- 微信小程序自定义函数调用及js文件之间的相互引用
- 微信小程序表单验证及页面之间参数传递
- 微信小程序中如何有效的修改app.js中全局变量的值,并能在页面中进行动态响应
- 微信小程序学习:navigateTo url 如何带多个参数&amp;从子页面退回父页面时的数据传递
- 关于小程序页面调用组件传参与使用函数
- 微信小程序页面之间传递参数方法小结
- 微信小程序,除了在url后面传递,如何在下一个页面传参,在下个页面如何接收到
- 微信小程序--页面之间相互传递数据方法
- 微信小程序(3)函数调用,参数传递
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序如何进行逆解析获取地址信息