使用场景:页面跳转时传递参数
实现方式:通过router模块的push方法传递参数
// 页面A传参
import router from '@ohos.router';
router.pushUrl({
url: 'pages/PageB',
params: {
id: 123,
name: 'HarmonyOS'
}
});
// 页面B接收参数
@Entry
@Component
struct PageB {
@State params: object = router.getParams(); // 获取参数
build() {
Column() {
Text(`ID: ${this.params['id']}`)
Text(`Name: ${this.params['name']}`)
}
}
}
父子组件间数据传递
通过@PROP @LINK装饰器
父子组件传参
// 父组件
@Entry
@Component
struct ParentComponent {
@State parentData: string = 'From Parent';
build() {
Column() {
ChildComponent({
childProp: this.parentData, // 传递普通数据
childLink: $parentData // 传递双向绑定数据
})
}
}
}
// 子组件
@Component
struct ChildComponent {
@Prop childProp: string; // 单向同步
@Link childLink: string; // 双向绑定
build() {
Column() {
Text(this.childProp)
Button('修改父数据')
.onClick(() => {
this.childLink = 'Changed by Child';
})
}
}
}
使用场景:跨组件/跨页面共享数据
实现方式:使用AppStorage
全局状态管理
// 存储数据
AppStorage.SetOrCreate('globalData', 'Initial Value');
// 任意组件获取数据
@Component
struct AnyComponent {
@StorageLink('globalData') globalData: string = '';
build() {
Button(`当前值: ${this.globalData}`)
.onClick(() => {
this.globalData = 'New Value';
})
}
}
使用场景:需要持久化存储的数据
实现方式:使用Preferences
本地存储
// 存储数据
import { Preferences } from '@ohos.data.preferences';
let prefs: Preferences = await Preferences.getPreferences(context, 'myPrefs');
await prefs.put('key', 'value');
await prefs.flush();
// 读取数据
let value = await prefs.get('key', 'default');
使用场景:任意组件间通信
实现方式:使用Emitter事件总线
// 发送事件
import emitter from '@ohos.events.emitter';
const eventData = {
data: { message: 'Hello HarmonyOS' }
};
emitter.emit(eventData, {
eventId: 1, // 自定义事件ID
priority: emitter.EventPriority.HIGH
});
// 接收事件
emitter.once({
eventId: 1
}, (eventData) => {
console.log('收到消息:', eventData.data.message);
});
使用场景:跨应用/跨Ability通信
实现方式:使用Want
对象传递参数
// 发送方
let want = {
bundleName: 'com.example.app',
abilityName: 'EntryAbility',
parameters: {
key1: 'value1',
key2: 100
}
};
context.startAbility(want);
// 接收方
import UIAbility from '@ohos.app.ability.UIAbility';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
let params = want.parameters; // 获取参数
}
}
使用场景:多层嵌套组件传递复杂对象
实现方式:使用@ObjectLink
装饰器
// 定义数据类
class User {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
// 父组件
@Entry
@Component
struct Parent {
@State user: User = new User('Alice', 25);
build() {
Column() {
Child({ user: this.user })
}
}
}
// 子组件
@Component
struct Child {
@ObjectLink user: User;
build() {
Column() {
Text(this.user.name)
Button('修改年龄')
.onClick(() => {
this.user.age += 1;
})
}
}
}
方式 |
适用场景 |
数据流向 |
生命周期 |
性能影响 |
页面导航传参 |
页面跳转 |
单向 |
页面存活期间 |
低 |
@Prop/@Link |
父子组件 |
单向/双向 |
组件存活期间 |
低 |
AppStorage |
全局状态 |
双向 |
应用运行期间 |
中 |
Preferences |
持久化存储 |
单向 |
永久存储 |
高 |
事件总线 |
任意组件通信 |
单向 |
事件触发时 |
中 |
UIAbility传参 |
跨应用通信 |
单向 |
Ability运行期间 |
低 |
@ObjectLink |
复杂对象多层传递 |
双向 |
组件存活期间 |
中 |
router
传参单向数据流:使用
@Prop
需要双向绑定:使用
@Link
3.全局状态管理:
单个页面内共享使用
LocalStorage
跨页面共享使用
AppStorage
4.复杂对象传递优先使用@ObjectLink
5.敏感数据传递建议结合加密模块使用