ArkTs基础语法一-编程知识

ArkTs基础语法一

1、条件渲染

Column() {if (this.count > 0) {Text('count is positive')}
}

2、循环渲染

ForEach(arr: any[], // 用于迭代的数组itemGenerator: (item: any, index?: number) => void, // 生成子组件的lambda函数keyGenerator?: (item: any, index?: number) => string // 用于给定数组项生成唯一且稳定的键值
)

3、装饰器

1、@State
@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。
2、@Prop
@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

import {PageSon} from '../componments/PageSon'@Entry
@Component
struct PageParten {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('点击修改标题').onClick(()=>{this.message='aaaa'})PageSon({message:this.message})}.width('100%')}.height('100%')}
}
子组件```ts@Component
export struct PageSon {@Prop message: string;build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('修改message的值').onClick(()=>{this.message='子组件修改的值'})}.width('100%')}.height('100%')}
}

父组件的通过@State装饰message，子组件通过@Link装饰message，这样就实现父组件给子组件单向传递参数
3、@Link
@Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。
父组件

import {PageSon} from '../componments/PageSon'
@Entry
@Component
struct PageParten {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('点击修改标题').onClick(()=>{this.message='aaaa'})PageSon({message:$message})}.width('100%')}.height('100%')}
}

子组件

@Component
export struct PageSon {@Link message: string;build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('修改message的值').onClick(()=>{this.message='子组件修改的值'})}.width('100%')}.height('100%')}
}

父组件的通过@State装饰message，子组件通过@Link装饰message，这样就实现父组件给子组件双向传递参数，注意父组件给子组件传递参数必须使用$符号。双向传递参数，子组件修改值，也会把父组件的值修改
4、@Provide和@Consume跨组件传递

@Entry
@Component
struct PageTest9 {@Provide message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('修改message').onClick(()=>this.message=this.message+"-"+new Date().getSeconds())CompA()}.width('100%')}.height('100%')}
}@Component
struct CompA{build(){CompB()}
}@Component
struct CompB{build(){CompC()}
}@Component
struct CompC{build(){CompD()}
}@Component
struct CompD{@Consume message:string;build(){Column(){Text(this.message)Button('修改子组件的值').onClick(()=>{this.message='我是坏蛋，我要把数据修改为，我是大主宰'})}}
}