鸿蒙组件数据传递：ui传递、@prop、@link_鸿蒙 有没有link组件

鸿蒙组件数据传递方式有很多种，下面详细罗列一下：

注意：
文章内名词解释：
正向：父变子也变 逆向：子变父也变

**第一种：直接传递

- 特点：1、任何数据类型都可以传递 2、不能响应式更新 （正向 逆向都不行） 3、适合纯ui渲染** 4、子组件需要初始化数据

@Entry
@Component
struct Demo04 {
  @State message: string = 'Hello World123'
  @State obj: Aa = {
    name: 'zhangsan'
  }

  build() {
    Row() {
      Column() {
        Text("基本数据类型")
        Son({ message: this.message })
        Divider().strokeWidth(2)
        Text("对象数据类型")
        Son({ obj:this.obj })
        Button('改变数据').onClick((event: ClickEvent) => {
          this.message = '666'
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Son {
  message: string = ''
  obj:Aa = {name:''}
  build() {
    Row() {
      Text(this.message)
      Text(this.obj.name)
    }
  }
}

class Aa{
  name: string = ''
}
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

第二种：@prop传递

特点：1、只能传递基本数据类型 2、可以正向的响应式数据更新 3、适合父组件改变子组件数据，但是子组件无法改变父组件数据的需求 4、子组件不需要初始化数据

@Entry
@Component
struct Demo04 {
  @State message: string = 'Hello World123'
  @State obj: Aa = {
    name: 'zhangsan'
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
        Button('改变数据').onClick((event: ClickEvent) => {
          this.message = '666'
        })
          .margin({
            bottom:20
          })
        Divider().strokeWidth(5)
        Text("基本数据类型")
        Son({ message: this.message })
        Divider().strokeWidth(2)
        Text("对象数据类型")
        // Son({ obj:this.obj })

      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Son {
  @Prop message:string
  // @Prop obj:Aa
  build() {
    Row() {
      Text(this.message)
      // Text(this.obj.name)
      Button("逆向改变").onClick(() => {
        this.message = "子变父不变"
        // this.obj.name = "子变父不变"
      })
    }
  }
}

class Aa{
  name: string = ''
}
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

第二种：@link传递

特点：1、任何数据类型都可以 2、可以正向和逆向的响应式数据更新 3、适合子父组件一起更新数据的需求 4、子组件不需要初始化数据

@Entry
@Component
struct Demo04 {
  @State message: string = 'Hello World123'
  @State obj: Aa = {
    name: 'zhangsan'
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
        Text(this.obj.name)
        Button('改变数据').onClick((event: ClickEvent) => {
          this.message = '666'
          this.obj.name = "lisi123"
        })
          .margin({
            bottom:20
          })
        Divider().strokeWidth(5)
        Text("基本数据类型")
        Son({message:$message})
        Divider().strokeWidth(2)
        Text("对象数据类型")
        // Son({obj:$obj})
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Son {
  @Link message:string
  // @Link obj:Aa
  build() {
    Row() {
      Text(this.message)
      // Text(this.obj.name)
      Button("逆向改变").onClick(() => {
        this.message = "子变父不变"
        // this.obj.name = "子变父不变"
      })
    }
  }
}

class Aa{
  name: string = ''
}
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

鸿蒙-传智播客-博学谷