微信小程序 发现之旅(三)—— 组件之间的参数传递

当使用 navigateTo() 方法跳转页面的时候,可以在 url 后面接 query 参数

微信小程序 发现之旅(三)—— 组件之间的参数传递

 

然后在 Page 页面的生命周期函数 onLoad 中可以接收到这些参数

微信小程序 发现之旅(三)—— 组件之间的参数传递

微信小程序 发现之旅(三)—— 组件之间的参数传递

 

这种方式只能通过 navigateTo 发送,onLoad 接收

所以只能用于跳转到非 tabbar 的页面

 

 

二、事件处理

之前介绍的 properties 可以从外部传参到组件内部,如果需要向外部传参,就需要用到组件事件

微信小程序 发现之旅(三)—— 组件之间的参数传递

自定义组件触发事件时,在 methods 中添加处理函数,然后使用 triggerEvent 方法,指定事件名,创建自定义事件

微信小程序 发现之旅(三)—— 组件之间的参数传递

然后在调用该组件的时候,添加这个自定义事件的处理函数

微信小程序 发现之旅(三)—— 组件之间的参数传递

但目前只是完成了事件的连锁,要想通过事件传参还有很多工作要做

 

小程序的事件处理函数都无法传入自定义参数,只能接收固定参数 event

微信小程序 发现之旅(三)—— 组件之间的参数传递

 但是可以通过这样的方式来创建额外参数 item:

微信小程序 发现之旅(三)—— 组件之间的参数传递

然后在事件参数 event 中,event.currentTarget.dataset 来获取对应的参数

 

微信小程序 发现之旅(三)—— 组件之间的参数传递

 

上面提到的 triggerEvent 方法可以包含三个参数,分别是事件名、detail 对象、事件选项

在获取到 dataset 中的参数之后,可以当做 detail 对象传给父组件

微信小程序 发现之旅(三)—— 组件之间的参数传递

微信小程序 发现之旅(三)—— 组件之间的参数传递

由此完成了自定义组件对父组件的传参

 

关于 triggerEvent 的第三个参数“事件选项”,可以参考这个表格:

微信小程序 发现之旅(三)—— 组件之间的参数传递

 

 

三、组件关系

当两个自定义组件之间有着嵌套关系的时候,可以在两个组件之内定义 relations,从而直接访问对方组件的实例

比如有这样的两个组件:

微信小程序 发现之旅(三)—— 组件之间的参数传递

上面的 <w-list> 的通过 <slot> 渲染到了 <w-block> 组件中,形成嵌套关系

这时可以在两个组件内部定义 relations

// components/w-block/w-block.js Component({ relations: { '../w-list/w-list': { // 对方组件的相对路径 type: 'child', // 关联的目标节点应为子节点 linked: function (target) { // 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后 }, linkChanged: function (target) { // 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后 }, unlinked: function (target) { // 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后 } } }, data: { name: "I'm WiseWrong", title: "Welcome to my blog", address: "" } })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpsfsg.html