【HarmonyOs鸿蒙】七种传参方式_鸿蒙父子组件传值
目录
一、页面间导航传参
二、组件间直接传参（父子组件）
1、父组件传递参数
2、子组件接收参数
三、全局状态管理传参
四、本地持久化传参
五、事件总线传参
六、UIAbility间传参
七、组件深层次传参
传参方式对比表
最佳实践建议
一、页面间导航传参
使用场景：页面跳转时传递参数
实现方式：通过router模块的push方法传递参数
// 页面A传参import router from \'@ohos.router\';router.pushUrl({ url: \'pages/PageB\', params: { id: 123, name: \'HarmonyOS\' }});// 页面B接收参数@Entry@Componentstruct PageB { @State params: object = router.getParams(); // 获取参数 build() { Column() { Text(`ID: ${this.params[\'id\']}`) Text(`Name: ${this.params[\'name\']}`) } }}二、组件间直接传参（父子组件）
父子组件间数据传递
通过@PROP @LINK装饰器
父子组件传参
1、父组件传递参数
// 父组件@Entry@Componentstruct ParentComponent { @State parentData: string = \'From Parent\'; build() { Column() { ChildComponent({ childProp: this.parentData, // 传递普通数据 childLink: $parentData // 传递双向绑定数据 }) } }}2、子组件接收参数
// 子组件@Componentstruct 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\');// 任意组件获取数据@Componentstruct 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);});六、UIAbility间传参
使用场景：跨应用/跨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@Componentstruct Parent { @State user: User = new User(\'Alice\', 25); build() { Column() { Child({ user: this.user }) } }}// 子组件@Componentstruct 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.敏感数据传递建议结合加密模块使用
码字不易，各位大佬点点赞呗
