小程序父子与兄弟组件间数据通信全解析

本文详细探讨了微信小程序中三种常见的页面与组件之间的数据通信关系：父子关系、兄弟关系以及爷孙关系。针对每种关系，本文提供了相应的数据通信方法。 1. **父子关系** - 当父页面是页面，子组件是自定义组件时，通常通过子组件触发事件（如`myevent`）并在父页面的`onMyEvent`方法中处理。子组件可以通过`triggerEvent`方法发送事件，并携带自定义的数据对象。例如： ```html <component bind:myevent="onMyEvent"></component> ``` 子组件： ```javascript methods: { onTap() { const myEventDetail = {/* ... */} this.triggerEvent('myevent', myEventDetail); } } ``` - 如果父组件是组件，子组件也是组件，可以通过事件总线（如EventBus）或者props来实现数据传递。 2. **兄弟关系** - 当两页面是兄弟关系时，可以通过页面的生命周期方法来实现数据共享： - 页面A到页面B： - 使用`globalData`全局变量或`localStorage`作为数据中转，例如在`App.js`中设置全局数据： ```javascript App({ globalData: { count: 0 }, }); ``` - 在页面A的`onShow`中保存数据，页面B的`onShow`中读取数据并更新： ```javascript // 页面A onShow() { localStorage.setItem('sharedData', JSON.stringify({ count: this.count })); } // 页面B onShow() { let sharedCount = JSON.parse(localStorage.getItem('sharedData')) || {}; this.count = sharedCount.count; } - 如果是组件间的兄弟关系，可以借助事件总线或者通信模块实现通信。 3. **爷孙关系** - 这指的是孙子组件向祖父组件传递数据，一般通过事件总线或递归调用父组件的方法来实现。孙子组件触发事件，然后祖父组件接收并处理。 通过以上三种方式，开发者可以根据实际需求和组件结构选择最合适的通信策略。理解这些基础通信方式有助于构建高效、可维护的小程序架构。