HarmonyOS 组件初始化参数

在组件内定义变量后，在初始化组件时对其进行赋值报错：

export struct HeaderView {
  @Param mobileNo: string = '';
  @Param closeMsg?: string = '';
  @Param isShowBack?: boolean = true;
  @Param isShowClose?: boolean = false;
  @Param isShowMore?: boolean = false;
  @Param title?: string | Resource = '';
  @Param backgroundC: Resource = $r('app.color.wp_white');
  onBackClick = () => {
  };
  onMoreClick = () => {
  };
  onCloseClick = () => {
  };
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

HeaderView({
  backgroundC: $r('app.color.wp_transparent'), onBackClick: () => {
    WpRouter.pop()
  }, title: $r('app.string.wp_mine_setting_account')
})
1.
2.
3.
4.
5.

HarmonyOS

Excelsior_abit

2025-01-09 15:34:01

浏览

回答 1

按赞同

按时间

Heiang

从API12开始，在@ComponentV2装饰的自定义组件中支持使用@Param装饰器。也可以使用@prop，示例参考如下：

@Component
struct HeaderView {
  @Prop mobileNo: string = '11';
  closeMsg?: string = '333';
  isShowBack?: boolean = true;
  isShowClose?: boolean = false;
  isShowMore?: boolean = false;
  @Prop title?: string | Resource = '';
  onBackClick = () => {
  };
  onMoreClick = () => {
  };
  onCloseClick = () => {
  };
  click? = (data: number) => {
  };

  build() {
    Column() {
      Text(this.mobileNo)
      Text(this.title)
      Text(this.closeMsg)
      Text('点击子组件').onClick(() => {
        if (this.click != undefined) {
          this.click(123);
        }
      })
    }
  }
}

@Entry
@Component
struct Index {
  clickFunc(data: number) {
    console.log(data.toString())
  }

  build() {
    Column() {
      Text('parents')
      HeaderView({ mobileNo: '123456', title: '标题测试', click: (data: number): void => this.clickFunc(data) })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.