HarmonyOS开发:传参方式

server/2025/1/12 0:21:38/

一、父子组件传参

1、父传子(@Prop方式)

父组件代码

javascript">@Entry
@Component
struct ParentComponent {@State parentMessage: string = 'Hello from Parent';build() {Column() {ChildComponent({ message: this.parentMessage });}}
}

子组件代码

javascript">@Component
struct ChildComponent {@Prop message: string;build() {Column() {Text(this.message);}}
}

2、父传子(@Link方式,实现双向绑定)

父组件代码

javascript">@Entry
@Component
struct ParentComponent {@State parentValue: number = 0;build() {Column() {ChildComponent({ value: $this.parentValue }); // 注意这里使用了$符号,表示传递的是引用Text('父组件的值: ' + this.parentValue);}}
}

子组件代码

javascript">@Component
struct ChildComponent {@Link value: number;build() {Column() {Text('子组件的值: ' + this.value);Button('Increase').onClick(() => {this.value += 1; // 修改子组件的值,父组件的值也会同步更新});}}
}

父组件ParentComponent通过@Link方式将parentValue的值传递给子组件ChildComponent,并实现了双向绑定。当子组件中的按钮被点击时,value的值会增加,同时父组件中的parentValue也会同步更新。

二、页面间的传参(使用router模板)

1、页面A代码

javascript">import { router } from '@ohos.router';@Entry
@Component
struct PageA {@State dataToSend: string = 'Data from Page A';build() {Column() {Button('Go to Page B').onClick(() => {router.pushUrl({url: 'pages/PageB',params: { message: this.dataToSend }});});}}
}

页面B代码

javascript">import { router } from '@ohos.router';@Entry
@Component
struct PageB {private receivedMessage: string = '';aboutToAppear() {const params = router.getParams();if (params && params.message) {this.receivedMessage = params.message;}}build() {Column() {Text('Received Message: ' + this.receivedMessage);}}
}

页面A通过router.pushUrl方法跳转到页面B,并在params参数中传递了dataToSend的值。页面B在aboutToAppear生命周期方法中通过router.getParams方法获取了这个值,并将其显示在页面上。

全局状态管理(使用装饰器)

javascript">// 定义全局状态管理器
@Observed
export class GlobalState {userLoggedIn: boolean = false;userName: string = "";
}// 组件A,用于修改全局状态
@Component
export struct ComponentA {@ObjectLink globalState: GlobalState;build() {Column() {Button("Login").onClick(() => {this.globalState.userLoggedIn = true;this.globalState.userName = "John Doe";});}}
}// 组件B,用于显示全局状态
@Component
export struct ComponentB {@Consume globalState: GlobalState;build() {Column() {if (this.globalState.userLoggedIn) {Text("User Logged In: " + this.globalState.userName);} else {Text("User Not Logged In");}}}
}

GlobalState 类被 @Observed 装饰器装饰,表示它是一个可观察的全局状态。ComponentA 和 ComponentB 分别使用 @ObjectLink 和 @Consume 装饰器来接收这个全局状态。当 ComponentA 修改全局状态时,ComponentB 会自动更新显示内容。

事件总线(Event Bus)

javascript">// 定义事件总线
const eventBus = new (function() {this.events = {};this.on = function(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);};this.emit = function(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(function(callback) {callback(data);});}};
})();// 组件A,用于发送事件
@Component
export struct ComponentA {build() {Button("Send Event").onClick(() => {eventBus.emit("customEvent", { message: "Hello from ComponentA" });});}
}// 组件B,用于接收事件
@Component
export struct ComponentB {message: string = "";constructor() {eventBus.on("customEvent", (data) => {this.message = data.message;});}build() {Text(this.message);}
}

依赖注入(模拟)

javascript">// 数据服务组件的工厂类
class DataServiceFactory {static getDataService() {return new DataService();}
}// 数据服务组件
class DataService {getData() {return "Sample Data";}
}// 页面组件,使用依赖注入获取数据服务组件
@Component
export struct PageComponent {dataService: DataService;constructor() {this.dataService = DataServiceFactory.getDataService();}build() {Text(this.dataService.getData());}
}

创建了一个 DataServiceFactory 类来提供 DataService 的实例。在 PageComponent 中,我们通过调用 DataServiceFactory.getDataService() 方法来获取 DataService 的实例,并将其存储在 dataService 属性中。然后,我们在 build 方法中使用这个数据服务来获取数据并显示在页面上。

使用存储机制(用户首选项)

javascript">import dataPreferences from '@ohos.data.preferences';let context = getContext(this);
let preference: dataPreferences.Preferences;class PreferenceModel {async getPreferencesFromStorage(db_name: string) {try {preference = await dataPreferences.getPreferences(context, db_name);} catch (err) { }}async putData(key: string, data: string, db_name: string = "DB_NAME") {if (!preference) {await this.getPreferencesFromStorage(db_name);}try {await preference.put(key, data);} catch (err) { }await preference.flush();}async getData(key: string, db_name: string = "DB_NAME") {if (!preference) {await this.getPreferencesFromStorage(db_name);}return await preference.get(key, "");}
}const preferenceModel = new PreferenceModel();// 存储数据
preferenceModel.putData("name", "John Doe");// 读取数据
preferenceModel.getData("name").then((data) => {console.log("Name: " + data);
});

创建了一个 PreferenceModel 类来封装用户首选项的存储和读取操作。我们使用 getPreferencesFromStorage 方法来获取用户首选项的实例,并使用 putData 和 getData 方法来存储和读取数据。然后,我们使用这些方法来存储和读取名为 "name" 的数据。

通过服务进行通信(Service Ability)

javascript">// Service Ability 的实现
@Entry
@Service
export class MyService extends Ability {onConnect(intent: Intent): IRemoteObject {return new MyRemoteObject();}
}class MyRemoteObject extends RemoteObject implements IRemoteBroker {onRemoteRequest(code: number, data: MessageParcel, reply: MessageParcel, option: MessageOption): boolean {// 处理来自客户端的请求let message = data.readString();console.log("Received message from client: " + message);// 回复客户端reply.writeString("Hello from service!");return true;}
}// 客户端组件,用于连接和发送消息给 Service Ability
@Component
export struct ClientComponent {build() {Button("Send Message to Service").onClick(() => {let context = getContext() as UIAbilityContext;let intent = new Intent();intent.setElement(new ElementName("com.example.myapplication", "com.example.myapplication.MyService"));context.connectAbility(intent, (err, remoteObject) => {if (err) {console.error("Failed to connect to service: " + err.message);return;}let messageParcel = new MessageParcel();messageParcel.writeString("Hello from client!");remoteObject.sendRequest(1, messageParcel, (reply, option) => {let response = reply.readString();console.log("Received response from service: " + response);});});});}
}

创建了一个 MyService 类来定义 Service Ability。它实现了 onConnect 方法来返回一个 MyRemoteObject 实例,该实例用于处理来自客户端的请求。客户端组件 ClientComponent 使用 connectAbility 方法连接到 Service Ability,并使用 sendRequest 方法发送消息给服务。服务接收到消息后,处理消息并回复客户端。

使用第三方库或框架提供的传参机制案例

假设的第三方UI框架:HarmonyUI

1. 安装和配置第三方库

首先,确保你的项目已经配置了第三方UI框架 HarmonyUI。通常这需要在项目的 build.gradle 文件中添加依赖项。

dependencies {implementation 'com.example:harmonyui:1.0.0'
}

2. 创建两个组件:

SenderComponent 和 ReceiverComponent

SenderComponent.java
javascript">import com.example.harmonyui.Component;
import com.example.harmonyui.communication.DataSender;public class SenderComponent extends Component implements DataSender {private String dataToSend = "Hello, Receiver!";@Overrideprotected void onInit() {super.onInit();// 使用框架提供的API发送数据sendData("receiverId", dataToSend);}// HarmonyUI框架的DataSender接口实现@Overridepublic void sendData(String receiverId, String data) {// 调用框架提供的发送数据方法HarmonyUI.getInstance().sendData(receiverId, data);}
}
ReceiverComponent.java
javascript">import com.example.harmonyui.Component;
import com.example.harmonyui.communication.DataReceiver;public class ReceiverComponent extends Component implements DataReceiver {private String receivedData;@Overrideprotected void onInit() {super.onInit();// 注册接收数据的回调HarmonyUI.getInstance().registerDataReceiver(this, "receiverId");}@Overridepublic void onDataReceived(String data) {this.receivedData = data;// 更新UI或执行其他逻辑updateUI();}private void updateUI() {// 假设有一个显示数据的文本视图textView.setText(receivedData);}
}

3、在主应用中注册和使用这两个组件

MainApplication.java
javascript">import com.example.harmonyui.Application;
import com.example.harmonyui.layout.LinearLayout;public class MainApplication extends Application {@Overrideprotected void onCreate() {super.onCreate();// 创建布局LinearLayout layout = new LinearLayout();// 创建组件实例SenderComponent senderComponent = new SenderComponent();ReceiverComponent receiverComponent = new ReceiverComponent();// 将组件添加到布局中layout.addChild(senderComponent);layout.addChild(receiverComponent);// 设置主布局setMainLayout(layout);}
}

通过上述代码,SenderComponent 使用 HarmonyUI 框架提供的 sendData 方法将字符串数据发送给 ReceiverComponentReceiverComponent 通过实现 DataReceiver 接口并注册接收数据的回调来接收数据,并在接收到数据后更新UI。

码字不易,各位网友大佬点点赞呗


http://www.ppmy.cn/server/157615.html

相关文章

缓存常见问题

缓存问题: 1. 缓存穿透:访问一个不存在的缓存 2. 缓存击穿:大批用户访问热点数据的时候,热点数据缓存失效,大量访问数据库 3. 缓存雪崩:大批量缓存全部失效 Redis和Memcached区别: 1. Redi…

【YOLOv8杂草作物目标检测】

YOLOv8杂草目标检测 算法介绍模型和数据集下载 算法介绍 YOLOv8在禾本科杂草目标检测方面有显著的应用和效果。以下是一些关键信息的总结: 农作物幼苗与杂草检测系统:基于YOLOv8深度学习框架,通过2822张图片训练了一个目标检测模型&#xff…

mv指令详解

🏝️专栏:计算机操作系统 🌅主页:猫咪-9527-CSDN博客 “欲穷千里目,更上一层楼。会当凌绝顶,一览众山小。” 目录 基本语法 主要功能 常用选项详解 1. 移动文件或目录 2. 重命名文件或目录 3. -i&am…

深入理解Mybatis原理》MyBatis动态SQL原理

引入 我们在使用mybatis的时候&#xff0c;会在xml中编写sql语句。比如这段动态sql代码&#xff1a; <update id"update" parameterType"org.format.dynamicproxy.mybatis.bean.User">UPDATE users<trim prefix"SET" prefixOverrides&q…

hive数据迁移

先迁移元数据 迁移mysql&#xff0c;保证2边的hdfsservice的location相同 迁移hdfs前要设定计划&#xff0c;假设数据1PB&#xff0c;里面有很多大表&#xff0c;最好能统计每个表的数据量以及大小 hdfs dfs -du -sh /user/hadoop/data 制定计划&#xff0c;进行分步骤迁移…

React面试合集

1. React 核心概念 1.1 什么是 React&#xff1f;它的核心优势是什么&#xff1f; 答案&#xff1a; React 是一个用于构建用户界面的 JavaScript 库。 核心优势&#xff1a; 组件化&#xff1a;将 UI 拆分为可复用的组件。虚拟 DOM&#xff1a;通过高效的 Diff 算法减少直…

Go语言之路————go基本语法、数据类型、变量、常量、输出

Go语言之路————go基本语法、数据类型、变量、常量 一、基本语法知识二、数据类型三、常量四、变量五、作用域六、输入输出 一、基本语法知识 其实编程语言的语法在大框架上都是大差不差的&#xff0c;这就是为啥一个人熟练掌握了一门语言&#xff0c;他能迅速上手另一个语…

【Go】:图片上添加水印的全面指南——从基础到高级特性

前言 在数字内容日益重要的今天&#xff0c;保护版权和标识来源变得关键。为图片添加水印有助于声明所有权、提升品牌认知度&#xff0c;并防止未经授权的使用。本文将介绍如何用Go语言实现图片水印&#xff0c;包括静态图片和带旋转、倾斜效果的文字水印&#xff0c;帮助您有…