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='我是坏蛋,我要把数据修改为,我是大主宰'
})
}
}
}
4、@Builder
@Builder装饰的方法用于定义组件的声明式UI描述,在一个自定义组件内快速生成多个布局内容。