HarmonyOS开发：传参方式

一、父子组件传参

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 文件中添加依赖项。

bash 复制代码

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!";

    @Override
    protected void onInit() {
        super.onInit();
        // 使用框架提供的API发送数据
        sendData("receiverId", dataToSend);
    }

    // HarmonyUI框架的DataSender接口实现
    @Override
    public 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;

    @Override
    protected void onInit() {
        super.onInit();
        // 注册接收数据的回调
        HarmonyUI.getInstance().registerDataReceiver(this, "receiverId");
    }

    @Override
    public 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 {
    @Override
    protected 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 方法将字符串数据发送给 ReceiverComponent。ReceiverComponent 通过实现 DataReceiver 接口并注册接收数据的回调来接收数据，并在接收到数据后更新UI。

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