HarmonyOS 鸿蒙Next emitter.on接收消息后，怎么在自定义组件中实时显示

HarmonyOS 鸿蒙Next emitter.on接收消息后，怎么在自定义组件中实时显示 在父窗口index.ets中点击按钮发送Json

在子窗口中写emitter.on的回调函数

请教各位，我怎么在子窗口中自动显示回调函数中收到的Json数据，或者显示这个字符串str

3 回复 
import emitter from '@ohos.events.emitter';

@Component
struct Index {
    @State message: string = "xxxxxx";

    build() {
        Row() {
            Column() {
                Text(this.message)
                    .fontSize(50)
                    .fontWeight(FontWeight.Bold)

                Button("发送").onClick(() => {
                    let innerEvent = {
                        eventId: 1,
                        priority: emitter.EventPriority.HIGH
                    };
                    emitter.emit(innerEvent, {
                        data: {
                            "testData": "ADC"
                        }
                    })
                })
            }
            .width('100%')
        }
        .height('100%')
    }

    onPageShow() {
        let innerEvent = {
            eventId: 1
        };
        emitter.on(innerEvent, (eventData) => {
            this.message = eventData['data']["testData"] as string
        })
    }

    onPageHide() {
        emitter.off(1)
    }
}

更多关于HarmonyOS 鸿蒙Next emitter.on接收消息后，怎么在自定义组件中实时显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没太懂，已经拿到eventData了，

在自定义组件中@State 中的属性 用this去修改就实时显示了，是这个意思吧？

在HarmonyOS鸿蒙Next中，使用emitter.on接收消息后，若想在自定义组件中实时显示，可以通过以下步骤实现：

  1. 定义状态变量：在自定义组件中定义一个状态变量，用于存储接收到的消息内容。

  2. 注册事件监听：在组件的生命周期方法中（如aboutToAppear），使用emitter.on注册事件监听器，监听特定的事件。

  3. 更新状态：在事件监听器的回调函数中，更新状态变量的值。由于状态变量的更新会触发组件重新渲染，因此界面会自动刷新。

  4. 绑定状态到UI：在组件的build方法中，将状态变量绑定到UI组件上，确保UI能够实时显示最新的消息内容。

示例代码如下：

import emitter from '@ohos.events.emitter';
import { State, Component } from '@ohos.arkui';

@Entry
@Component
struct MyComponent {
  @State message: string = '';

  aboutToAppear() {
    emitter.on('myEvent', (data) => {
      this.message = data.message;
    });
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .margin(10)
    }
  }
}

在上述代码中，emitter.on监听名为myEvent的事件，并在接收到消息后更新message状态变量。Text组件绑定了message，因此当message更新时，Text组件会实时显示最新的消息内容。

通过这种方式，可以在自定义组件中实现消息的实时显示。

回到顶部