鸿蒙ArkTS语法使用常见题目

ArkUI怎样通过代码动态创建组件(API 9)

办理步伐
ArkUI使用ArkTS声明式开辟范式，开辟者无法持有组件实例，在声明时通过渲染控制语法以及动态构建UI元素的方式，控制组件的创建。
代码示例

1. // 条件渲染语句创建组件
2. if(this.isTrue) {
3.   Text("创建文本组件").fontSize(30)
4. }
5. // 循环渲染语句创建组件
6. ForEach(this.nums,(item) => {
7.   Text(item + '').fontSize(30)
8. },item => JSON.stringify(item))

复制代码

使用@Builder装饰器包罗自界说组件的方法与平常方法的区别是什么(API 9)

办理步伐
@Builder装饰的方法中使用了自界说组件，那么该方法每次被调用时，对应的自界说组件均会重新创建，平常方法中不使用@builder装饰，无法容纳自界说组件。
怎样使用@BuilderParam装饰器举行组件传参(API 9)

办理步伐

  

• 不带参数
  对@BuilderParam修饰的属性举行赋值时不带参数（如：content: this.specificParam），则此属性的范例需界说成无返回值的函数（如：@BuilderParam content: () => void）。
    
  
• 带参数
  对@BuilderParam修饰的属性举行赋值时带参数（如：callContent: this.specificParam1(“111”)），则此属性的范例需界说成any（如：@BuilderParam callContent: any）。
  
  

怎样监听数组内对象属性厘革(API 9)

题目征象
数组内存储对象示例，须要对对象的属性厘革举行监听。
办理步伐
通过@Observed共同@ObjectLink装饰符实现。@Observed用于类，@ObjectLink用于变量。
代码示例

  

• 在类上使用@Observed。
  
  1. @Observed
  2. class ClassA {
  3.   public name: string
  4.   public c: number
  5.   public id: number
  7.   constructor(c: number, name: string = 'OK') {
  8.     this.name = name
  9.     this.c = c
  10.   }
  11. }

  复制代码
  
  
• 在组件变量使用@ObjectLink。
  
  1. @Component
  2. struct ViewA {
  3.   label: string = 'ViewA1'
  4.   @ObjectLink a: ClassA
  6.   build() {
  7.     Row() {
  8.       Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
  9.         .onClick(() => {
  10.           this.a.c += 1
  11.         })
  12.     }.margin({ top: 10 })
  13.   }
  14. }

  复制代码
  
  

子组件使用@Link修饰成员变量时，怎样通过父组件传值(API 9)

办理步伐
子组件使用@Link担当父组件的值时，须要使用’$'创建变量之间的引用关系。才气实现同步。
代码示例
@Link语义是从’$'操纵符引出，即$isPlaying是this.isPlaying内部状态的双向数据绑定。当单击子组件PlayButton中的按钮时，@Link变量更改，PlayButton与父组件中的Text和Button将同时举行革新，同样地，当点击父组件中的Button修改this.isPlaying时，子组件PlayButton与父组件中的Text和Button也将同时革新。

  

• 在父组件使用@State装饰器，通报数据使用$符创建引用。
  
  1. @Entry
  2. @Component
  3. struct Player {
  4.   @State isPlaying: boolean = false
  5.   build() {
  6.     Column() {
  7.       PlayButton({ buttonPlaying: $isPlaying })
  8.       Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18)
  9.       Button('Parent:' + this.isPlaying)
  10.         .margin(15)
  11.         .onClick(() => {
  12.           this.isPlaying = !this.isPlaying
  13.         })
  14.     }
  15.   }
  16. }

  复制代码
  
  
• 在子组件使用@Link担当数据。
  
  1. @Component
  2. struct PlayButton {
  3.   @Link buttonPlaying: boolean
  5.   build() {
  6.     Column() {
  7.       Button(this.buttonPlaying ? 'pause' : 'play')
  8.         .margin(20)
  9.         .onClick(() => {
  10.           this.buttonPlaying = !this.buttonPlaying
  11.         })
  12.     }
  13.   }
  14. }

  复制代码
  
  

父组件怎样与孙子组件举行状态同步(API 9)

办理步伐

  

• 方式一（保举）：使用@Provide和@Consume装饰器。在父组件使用@Provide，在孙子组件使用@Consume，可以实现父组件和孙子组件举行双向数据绑定。
    
  
• 方式二：使用@State和@Link装饰器。在父组件使用@State，在每一层子组件（子组件和孙子组件）都使用@Link。
  
  

代码示例一

  

• 父组件中使用子组件，通过Provide提供reviewVote参数，供跨级通报给孙子组件。
  
  1. @Entry
  2. @Component
  3. struct Father{
  4.   @Provide("reviewVote") reviewVotes: number = 0;
  6.   build() {
  7.     Column() {
  8.       Son()
  9.       Button(`Father: ${this.reviewVotes}`)
  10.         ...
  11.     }
  12.   }
  13. }

  复制代码
  
  
• 子组件中使用孙组件。
  
  1. @Component
  2. struct Son{
  3.   build() {
  4.     Column() {
  5.       GrandSon()
  6.     }
  7.   }
  8. }

  复制代码
  
  
• 孙子组件中使用Consume来担当reviewVote的参数。
  
  1. @Component
  2. struct GrandSon{
  3.   @Consume("reviewVote") reviewVotes: number
  5.   build() {
  6.     Column() {
  7.       Button(`GrandSon: ${this.reviewVotes}`)
  8.         ...
  9.     }.width('100%')
  10.   }
  11. }

  复制代码
  
  

代码示例二

  

• 父组件Father使用@State绑定命据reviewVote。
  
  1. @Entry
  2. @Component
  3. struct Father {
  4.   @State reviewVotes: number = 0;
  6.   build() {
  7.     Column() {
  8.       Son({reviewVotes:$reviewVotes})
  9.       Button(`Father: ${this.reviewVotes}`)
  10.         ...
  11.     }
  12.   }
  13. }

  复制代码
  
  
• 子组件Son中使用@Link担当由父组件Father通报的参数reviewVote。
  
  1. @Component
  2. struct Son{
  3.   @Link reviewVotes: number;
  4.   build() {
  5.     Column() {
  6.       Grandson({reviewVotes:$reviewVotes})
  7.     }
  8.   }
  9. }

  复制代码
  
  
• 孙子组件GrandSon使用@Link担当由Son组件通报的参数reviewVote。
  
  1. @Component
  2. struct Grandson{
  3.   @Link reviewVotes: number;
  5.   build() {
  6.     Column() {
  7.       Button(`Grandson: ${this.reviewVotes}`)
  8.         ...
  9.     }.width('100%')
  10.   }
  11. }

  复制代码
  
  

Js如


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金