赞
踩
在 Taro 小程序开发中实现一个全局的订阅发布机制,可以让你在任何一个 TabBar 页面修改数据时,通知其他 TabBar 页面更新数据。这种机制可以通过自定义事件的方式来实现
首先,在你的小程序中创建一个全局的事件管理器(EventBus),用于管理不同页面间的订阅和发布事件。
- // event-bus.js
- class EventBus {
- constructor() {
- this.events = {};
- }
-
- // 订阅事件
- on(event, callback) {
- if (!this.events[event]) {
- this.events[event] = [];
- }
- this.events[event].push(callback);
- }
-
- // 取消订阅
- off(event, callback) {
- if (!this.events[event]) return;
- const index = this.events[event].indexOf(callback);
- if (index > -1) {
- this.events[event].splice(index, 1);
- }
- }
-
- // 发布事件
- emit(event, data) {
- if (!this.events[event]) return;
- this.events[event].forEach(callback => callback(data));
- }
- }
-
- // 创建一个全局的EventBus实例
- const eventBus = new EventBus();
- export default eventBus;
在需要互相通知的 TabBar 页面中,导入全局的事件管理器,并在页面加载时订阅事件,在适当的时机发布事件。
- import Taro from '@tarojs/taro';
- import eventBus from './event-bus';
-
- class PageA extends Taro.Component {
- updateData() {
- // 更新数据的逻辑
- const newData = { /* 新数据 */ };
-
- // 发布事件,通知其他页面数据已更新
- eventBus.emit('dataUpdated', newData);
- }
- }
- import Taro from '@tarojs/taro';
- import eventBus from './event-bus';
-
- class PageB extends Taro.Component {
- componentDidMount() {
- // 订阅事件,当数据更新时接收新数据并处理
- eventBus.on('dataUpdated', this.handleDataUpdate);
- }
-
- componentWillUnmount() {
- // 页面卸载时取消订阅,避免内存泄露
- eventBus.off('dataUpdated', this.handleDataUpdate);
- }
-
- handleDataUpdate = (newData) => {
- // 使用新数据更新页面
- };
- }
通过这种方式,可以在任何一个 TabBar 页面修改数据时,通过全局事件管理器通知其他 TabBar 页面进行数据更新
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。