HarmonyOS NEXT跨多个组件之间如何进行数据通信?

2025-01-03 10:59:05
33次阅读
0个评论

问题描述 HarmonyOS NEXT跨多个组件之间如何进行数据通信

应用场景: app用户登录后的登录状态和用户信息,需要传递到许多相邻的页面和组件中

解决方案一:

【应用级变量的状态管理】 使用AppStorage使用应用全局的UI状态存储相关的装饰器:@StorageProp (单向)和@StorageLink (双向 不建议)

方案1:


//登录页面
AppStorage.setOrCreate('isLogin', true);



// 其他页面及组件
@Component
struct CompA {
  @StorageProp('isLogin') loginStateA: Boolean = false;

  build() {
    Column({ space: 20 }) {
        if(loginStateA){
            Text(`用户已经登录`)
        }else{
             Text(`用户未登录`)
        }
      
    }
  }
}


@Component
struct CompB {
  @StorageProp('isLogin') loginStateB: Boolean = false;

  build() {
    Column({ space: 20 }) {
        if(loginState){
            Text(`用户已经登录`)
        }else{
             Text(`用户未登录`)
        }
      
    }
  }
}


解决方法二

使用Emitter进行【线程间通信】:在父组件发送事件,子组件或其他组件里面监听事件和数据变化,来触发子组件里面的其他方法,这样也能实现父组件调用子组件;反之也能实现子组件触发父组件的方法

好处:可以跨组件, 注意:需要在公共文件里面订阅好 不同Emitter事件的不同eventId 标识,避免互相干扰

发布事件

import { emitter } from '@kit.BasicServicesKit';


// 定义一个eventId为1的发送事件,事件优先级为Low
let event: emitter.InnerEvent = {
  eventId: 1,
  priority: emitter.EventPriority.LOW
};

let eventData: emitter.EventData = {
  data: {
    content: 'c',
    id: 1,
    isLogin: false
  }
};

// 发送eventId为1的事件,事件内容为eventData
emitter.emit(event, eventData);

订阅事件

import { emitter } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'ThreadModel';
const DOMAIN_NUMBER: number = 0xFF00;

// 定义一个eventId为1的接收事件
let event: emitter.InnerEvent = {
  eventId: 1
};

// 收到eventId为1的事件后执行该回调,这里就是编写其他函数
let callback = (eventData: emitter.EventData): void => {
  promptAction.showToast({
    message: JSON.stringify(eventData)
  });
  hilog.info(DOMAIN_NUMBER, TAG, 'event callback:' + JSON.stringify(eventData));
};

// 订阅eventId为1的事件,接收到数据后,立刻触发回调函数
emitter.on(event, callback);
promptAction.showToast({
  message: JSON.stringify('emitter subscribe success')
});





收藏00

登录 后评论。没有帐号? 注册 一个。