HarmonyOS 鸿蒙Next:传递给组件的参数是如何运作的?

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

在学习代码示例中“ArkUI组件封装场景”的时候,我对代码做了一些修改,增加了一个@State ttt:string="string"用于观察为组件传参时的行为,但是现在发现了一个问题,不知道是特性还是bug,求解答

详细代码如下,我修改的地方在于增加了一个self.ttt变量,初值为“string”,在主页面定义了一个按钮,按下后会将self.ttt改为“text”,在自定义组件中定义了一个click事件,点击图片后会将self.ttt改为“clicked”。

现在发现以下行为:

1.页面初始化完成,展示“string”

2.点击按钮后,展示“text”

3.点击图片后,展示“clicked”

4.再次点击按钮,内容不发生变化,保持为“clicked”不变

行为2:

1.页面初始化完成,展示“string”

2.点击图片后,展示“clicked”

3.点击按钮后,展示“text”

4.再次点击图片后,展示“clicked”

5.再次点击按钮,内容不发生变化,保持为“clicked”不变

CommonComponent.ets

import { CustomImageText } from '../view/CustomImageText';

@Entry
@Component
struct CommonComponent {
  imageAttribute: ImageModifier = new ImageModifier(330, 330);
  textAttribute: TextModifier = new TextModifier();
  [@State](/user/State) ttt:string="string"

  build() {
    NavDestination() {
      Column() {
        CustomImageText({
          imageAttribute: this.imageAttribute,
          textAttribute: this.textAttribute,
          imageSrc: $r('app.media.image'),
          text: this.ttt
        })
        Button(){
          Text("text")
            .fontSize(50)
        }.onClick((event: ClickEvent) => {
          this.change_text()
        })
        .padding(10)
      }
      .margin({ top: $r('app.float.margin_top') })
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.ONE_HUNDRED_PERCENT)
      .height(CommonConstants.ONE_HUNDRED_PERCENT)

    }
    .title(getResourceString($r('app.string.common'), this))
  }

  change_text(){
    this.ttt="text"
  }
}

CustomImageText.ets

@Component
export struct CustomImageText {
  @Prop imageAttribute: AttributeModifier<ImageAttribute>;
  @Prop textAttribute: AttributeModifier<TextAttribute>;
  @Prop imageSrc: PixelMap | ResourceStr | DrawableDescriptor;
  @Prop text: string;

  build() {
    Column({ space: CommonConstants.BUTTON_SPACING }) {
      Image(this.imageSrc)
        .attributeModifier(this.imageAttribute)
        .onClick(()=>{
          this.text = 'clicked'
        })
      Text(this.text)
        .attributeModifier(this.textAttribute)
    }
  }
}

4 回复

好的,谢谢

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5
使用[@Link](/user/Link)装饰器,可以实现预期的双向连接变化行为

在HarmonyOS鸿蒙Next中,组件间参数的传递是一个核心功能,它主要通过以下几种方式运作:

  1. 父子组件参数传递

    • 父传子:可以通过@Prop@Link或普通变量来实现。其中,@Prop实现单向传递,@Link实现双向绑定,普通变量只能在子组件初始化时获取数据。
    • 子传父:子组件通过$emit触发事件,将参数传递给父组件。
  2. 页面(组件)间参数传递

    • 页面间的导航和参数传递通常通过页面路由router模块来实现。通过定义不同的url,可以访问不同的页面,并在跳转时携带参数。
  3. 组件化运行与参数传递

    • 在HarmonyOS NEXT中,组件化运行模式下,参数的传递也依赖于组件间的定义和路由配置。通过hvigor插件或node脚本,可以实现组件的快速切换和运行,同时保持参数的准确传递。

总的来说,HarmonyOS鸿蒙Next中的参数传递机制灵活且强大,能够满足不同场景下的需求。如果在使用过程中遇到问题,建议查阅官方文档或相关开发资料,也可以联系官网客服以获取更专业的帮助。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部