OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法原创精华

陈浩南xxx

发布于 2022-4-11 17:15

浏览

1收藏

简单的变量传值：OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM

若我们多组件之间要传值，一层层传递下去有点麻烦；我们可以用@Consume和@Provide进行跨组件传值

@Provide

@Provide类似@State状态变量，如果@Provide装饰的变量或@Consume装饰的变量发生变化，会重新渲染页面
支持类型
- 基础类型 boolean，string，number
- observed class，修改其中的属性
- Array：添加，删除，更新数组中的元素
Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染

@Consume

Consume在感知到Provide数据的更新后，会触发当前view的重新渲染

1，单个对象垮组件传值

OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法-鸿蒙开发者社区

class Data {
  playNum: number //播放量

  constructor(playNum: number) {
    this.playNum = playNum
  }
}
1.
2.
3.
4.
5.
6.
7.

Entry部分

 @Provide("provide_data") data: Data = new Data(11)
1.

子组件部分

@Consume("provide_data") data: Data;
1.

2，数组传值

类似上去

注意：列表新增UI会刷新，但内部对象属性改变不会引起刷新

OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法-鸿蒙开发者社区

3，完整代码

class Data {
  playNum: number //播放量

  constructor(playNum: number) {
    this.playNum = playNum
  }
}

@Entry
@Component
struct CompA {
  @Provide("provide_data") data: Data = new Data(11)
  @Provide("provide_list") dataList: Data[] = [
    { playNum: 0, },
    { playNum: 1, },
    { playNum: 2, },
    { playNum: 3, }
  ]

  aboutToAppear() {
  }

  build() {
    Column() {
      Text('简单数据类型').fontSize(24).fontColor('#FF0000')

      Text('利用@Consume和@Provide').fontSize(24).fontColor('#FF0000')

      Text('跨组件传值').fontSize(24)

      Text('单个对象内部改变').fontSize(24).margin({ top: 20 })

      Row() {
        Column() {
          Button(`Entry:${this.data.playNum}`).fontSize(22)
            .onClick(() => {
              this.data.playNum += 1
            })
        }
      }

      Com2()

      Text('列表改变').fontSize(24).margin({ top: 20 })


      Text('列表新增UI会刷新，但内部对象属性改变不会引起刷新').fontSize(24).margin({ top: 20 }).fontColor('#FF0000')

      Row() {

        Column() {
          Button(`Entry:减少一个`).fontSize(12)
            .onClick(() => {
              this.dataList.pop()
            })

          ForEach(this.dataList, (item: Data) => {
            Button(`Entry:${item.playNum}`).fontSize(12)
              .onClick(() => {
                item.playNum += 1
              })
          }, item => JSON.stringify(item))
        }

        ComList2()
      }

    }
    .width('100%').margin({ top: 20 })
  }
}

@Component
export struct Com2 {
  @Consume("provide_data") data: Data;

  build() {
    Column() {
      Row() {
        Button(`子组件2:${this.data.playNum}`).fontSize(20)
          .onClick(() => {
            this.data.playNum += 1;
          })

        Com3()
      }
    }
  }
}

@Component
export struct ComList2 {
  @Consume("provide_list") dataList: Data[]

  build() {

    Row() {
      Column() {
        Button(`ComList2:新增一个`).fontSize(12)
          .onClick(() => {
            this.dataList.push( { playNum: 0, })
          })

        ForEach(this.dataList, (item: Data) => {
          Button(`ComList2:${item.playNum}`).fontSize(12)
            .onClick(() => {
              item.playNum += 1
            })
        }, item => JSON.stringify(item))
      }

      ComList3()
    }
  }
}

@Component
export struct Com3 {
  @Consume("provide_data") data: Data;

  build() {
    Column() {
      Row() {
        Button(`子子组件3:${this.data.playNum}`).fontSize(20)
          .onClick(() => {
            this.data.playNum += 1;
          })
      }
    }
  }
}

@Component
export struct ComList3 {
  @Consume("provide_list") dataList: Data[]

  build() {
    Column() {
      Button(`ComList3:新增一个`).fontSize(12)
        .onClick(() => {
           this.dataList.push( { playNum: 0, })
        })

      ForEach(this.dataList, (item: Data) => {
        Button(`ComList3:${item.playNum}`).fontSize(12)
          .onClick(() => {
            item.playNum += 1
          })
      }, item => JSON.stringify(item))
    }
  }
}


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.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.