命令

本文讨论了孩子或孙子从下到上将数据传递给父母的情况

相信大家在开发小程序的时候都遇到过页面或者组件之间的数据通信问题。小程序中数据通信的方式有哪些？如何选择合适的沟通方式？这是本文的重点。

关系部

在讨论数据通信方法之前，让我们定义小程序页面和组件之间的关系。我总结了一下，大致分为以下三类：

父子关系、兄妹关系、祖孙关系不同，不同的角色可能是页面，也可能是组件。然后我们会一一揭示如何进行数据交流。

亲子关系

父子关系一般主要有两种情况：

父级是页面，子级是组件，父级是组件，子级是组件

这种关系大概是最频繁的。毕竟大部分小程序页面主要是小巧美观，可能分的不太细。在这种情况下，我们可以通过监视父页面上的子组件触发的事件来完成数据通信。

方法一

！-当自定义组件触发“myevent”事件时，调用“onMyEvent”方法-组件-标记-名称bind myevent=' on myevent'/！-在自定义组件-按钮绑定中点击=' ontap '点击此按钮将触发“myevent”事件/button component({ methods : { ontap(){ const myeventdetail={ }//detail对象，Option this。triggerevent ('myevent detail，myevent option)} })被提供给事件监视器函数const myEventOption={} //来触发事件

兄弟关系

兄弟也分为两种情况：

所有兄弟都是页面，所有兄弟都是组件，所有兄弟都是页面

这种关系指的是同一级别的页面只是页面之间的跳转。从页面A跳转到页面B时，页面B如何修改页面A的数据？

方法2

在页面生命周期中有两种方法，它们使用本地存储或全局数据作为数据传输。进入不同页面时，取出上一页显示的数据，并将数据存储在下一页显示中。具体方法如下：

！-App . js-App({ global data : { count : 0 }，})；-page a-onshow(){让计数值=wx . getstoragesync(' count ')；-的方式-global data-让计数值=getapp()。globaldata.count！-if(count value){ this . setdata({ count : count value })}！以- globalData-getapp()的方式清除数据。globaldata.count=null！-} OnHide(){ wx . removeStorageync(' count ')}！-page b-on show () {！globaldata的方式-getapp()。globaldata。计数=1！- wx.setStorageSync('count '，1)；}

祖父-孙子关系

祖父孙关系是数据通信中最复杂的，因为它不是直接传输的。如果通过方法一进行监控，则需要通过多个级别传输事件。如果节点很深，可以想象代码很难理解和维护。

我们可以全局创建一个事件栈EventBus，并使用这个EventBus订阅发布事件，这是我们经常使用的发布订阅模式。如何在小程序中实现？

方法3

！-第一步：实现一个事件总栈类-class事件总线{ constructor(){ this。bus={ }；} //on订阅on(type，fun) { if (typeof fun！==' function '){ console。错误('有趣不是函数');返回；}(这个。总线[类型]=这个。总线[类型]| |[]).推（好玩);} //发射触发发射（类型，param){ let cache=this。总线[类型]；if(！缓存)返回；用于(让事件缓存){ event.call(这，param)；} } //关闭释放关(类型，乐趣){让事件=这个。总线[类型]；if(！事件)返回；设i=0，n=事件. length对于；I n；I){ let event=events[I]；if(fun===event){ events。拼接(，1)；打破；} } } } module.exports=EventBus！-第二步：在app.js文件中引入-从""导入事件总线/公共/事件总线/索引。js '；App({ eventBus: new EventBus()，})；-第三步：在父页面或者父组件中监听某个事件- onLoad:函数（选项){ app.eventBus.on('add-count '，这个。AddCount)；}onUnload:函数（选项){ app.eventBus.off('add-count '，这个。addcount)；}!-第四步：在子组件里面触发事件-methods : { addCount(){ app。活动巴士。emit(' add-count ')；} }

除此之外，还有一种方式，我们可以在每个页面装载周期里面将该页面的页面模型对象缓存起来，之后在孙辈组件里面拿到祖孙的页面对象，从而触发祖孙页面对象对应的方法。

！-第一步：实现一个页面模型，用来缓存页面对象-class page model { constructor(){ this。页面缓存={ }；}添加(页面){ 0让页面路径=这个._getPageModelPath(页面);这个。页面缓存[页面路径]=page；}获取(路径){ 0返回这个。页面缓存[路径]；}删除(第页){删除此内容。页面缓存[这个._getPageModelPath(第页)];} !-这一段代码是关键，存储的是__路线_ _属性- _getPageModelPath(第页){ 0返回页面。__路线_ _;} }导出默认页面模型；-第二步：app.js中引入-从""导入页面模型/公共/页面模型/索引。js '；app({ page model : new page model()，})；-第三步：页面装载周期里缓存页面- onLoad:函数（选项){ app。页面模型。添加(此)；}!-第四步：子孙获取祖辈方法-methods : { addCount(){ app。页面模型。获取(页面/通信/索引).addCount()；} }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。