欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > 【HarmonyOs鸿蒙】七种传参方式

【HarmonyOs鸿蒙】七种传参方式

2025/7/1 12:54:49 来源:https://blog.csdn.net/m0_64455070/article/details/147922377  浏览:    关键词:【HarmonyOs鸿蒙】七种传参方式

一、页面间导航传参

使用场景:页面跳转时传递参数

实现方式:通过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装饰器

父子组件传参

1、父组件传递参数

// 父组件
@Entry
@Component
struct ParentComponent {@State parentData: string = 'From Parent';build() {Column() {ChildComponent({ childProp: this.parentData, // 传递普通数据childLink: $parentData      // 传递双向绑定数据})}}
}

2、子组件接收参数

// 子组件
@Component
struct ChildComponent {@Prop childProp: string;           // 单向同步@Link childLink: string;           // 双向绑定build() {Column() {Text(this.childProp)Button('修改父数据').onClick(() => {this.childLink = 'Changed by Child';})}}
}

三、全局状态管理传参

使用场景:跨组件/跨页面共享数据
实现方式:使用AppStorage全局状态管理

// 存储数据
AppStorage.SetOrCreate<string>('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, // 自定义事件IDpriority: 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
@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

复杂对象多层传递

双向

组件存活期间

最佳实践建议

  1. 简单页面跳转优先使用router传参
  2. 父子组件通信根据需求选择:

单向数据流:使用@Prop

需要双向绑定:使用@Link

     3.全局状态管理

单个页面内共享使用LocalStorage

跨页面共享使用AppStorage

      4.复杂对象传递优先使用@ObjectLink

      5.敏感数据传递建议结合加密模块使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词