通信 - 比特日记

通信

@Prop


1
2
3
1单向数据通信，子组件同步父组件更新
2不能在@Entry中使用
3可以不初始化


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 1import { UserModel } from "./UserModel"
 2
 3@Component
 4export struct ChildModel {
 5  @Prop user: UserModel
 6
 7  build() {
 8    Column() {
 9      Text(`${this.user.id}`)
10      Text(`${this.user.name}`)
11      Button('修改').onClick(() => {
12        this.user.name = '哇哈哈'
13      })
14    }
15  }
16}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 1import { UserModel } from '../viewmodel/UserModel'
 2import { ChildModel } from '../viewmodel/ChildModel'
 3
 4@Entry
 5@Component
 6struct Page02_TaskList {
 7  @State user: UserModel = new UserModel(1, 'Helen')
 8
 9  build() {
10    Column() {
11      ChildModel({
12        user: this.user
13      })
14      Text(`${JSON.stringify(this.user)}`)
15    }
16  }
17}

@Link

双向数据通信，父组件同步子组件更新


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 1import { UserModel } from "./UserModel"
 2
 3@Component
 4export struct ChildModel {
 5  @Link user: UserModel
 6
 7  build() {
 8    Column() {
 9      Text(`${this.user.id}`)
10      Text(`${this.user.name}`)
11      Button('修改').onClick(() => {
12        this.user.name = '哇哈哈'
13      })
14    }
15  }
16}

固定传参


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 1// 父组件
 2@Entry
 3@Component
 4struct Page02_TaskList {
 5  @State message: string = ''
 6
 7// 子组件
 8build() {
 9  Column() {
10    ChildModel({
11      message: this.message
12    })

@Provide与@Consume


1
2
3
4
5
1爷孙组件双向同步
2@Provide在父组件中使用
3@Consume在子或孙组件中使用，无需初始化，值来自@Provide
4可以自行修改变量名称
5类似@Link双向数据更新


 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
46
47
48
49
50
51
52
53
54
 1@Entry
 2@Component
 3struct Page05_Provide {
 4  @State message: string = 'Hello World';
 5  @Provide msg: string = 'HarmonyOS'
 6
 7  build() {
 8    Column() {
 9      Button('父组件修改')
10        .onClick(() => {
11          this.msg = 'Huawei'
12        })
13      CompA()
14    }
15    .height('100%')
16    .width('100%')
17  }
18}
19
20@Component
21export struct CompA {
22  @Consume msg: string
23
24  build() {
25    Column() {
26      Text('CompA组件')
27      Button('子组件修改')
28        .onClick(() => {
29          this.msg = 'Huawei'
30        })
31      CompB()
32    }
33    .width('100%')
34    .height('100%')
35  }
36}
37
38@Component
39export struct CompB {
40  @Consume('msg') myMsg: string
41
42  build() {
43    Column() {
44      Text('CompB组件')
45      Button('孙组件修改')
46        .onClick(() => {
47          this.myMsg = 'Huawei'
48        })
49      Text(this.myMsg)
50    }
51    .width('100%')
52    .height('100%')
53  }
54}

@Watch

回调函数同步