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

class Data {
  playNum: number //播放量

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

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

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

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.