@Provide和@Consume，應用于與后代組件的雙向數據同步，應用于狀態數據在多個層級之間傳遞的場景。不同于@State/@Link裝飾器修飾的 父子組件之間通過命名參數機制傳遞，@Provide和@Consume擺脫參數傳遞機制的束縛，實現跨層級傳遞。
其中@Provide裝飾的變量是在祖先節點中，可以理解為被“提供”給后代的狀態變量。@Consume裝飾的變量是在后代組件中，去“消費（綁定）”祖先節點提供的變量。
@Provide/@Consume裝飾的狀態變量有以下特性：
- @Provide裝飾的狀態變量自動對其所有后代組件可用，即該變量被“provide”給他的后代組件。由此可見，@Provide的方便之處在于，開發者不需要多次在組件之間傳遞變量。
- 后代通過使用@Consume去獲取@Provide提供的變量，建立在@Provide和@Consume之間的雙向數據同步，與@State/@Link不同的是，前者可以在多層級的父子組件之間傳遞。
- @Provide和@Consume可以通過相同的變量名或者相同的變量別名綁定，變量類型必須相同。
@Provide和@Consume通過相同的變量名或者相同的變量別名綁定時，@Provide修飾的變量和@Consume修飾的變量是一對多的關系。不允許在同一個自定義組件內，包括其子組件中聲明多個同名或者同別名的@Provide裝飾的變量。
例如:
@Entry
@Component
struct ProvideAndConsume {// @State message: string = '我是父組件'@Provide('change') message: string = '我是父組件'build() {Row() {Column() {Text(this.message).ProvideAndConsumeSty('',()=>{this.message = "我是父組件變化后的值"})Divider()// 調用子組件ProvideAndConsumeSon()}.width('100%')}.height('100%')}
}
@Component
struct ProvideAndConsumeSon{build(){Column(){Text('我是兒子組件').ProvideAndConsumeSty(Color.Orange)Divider()// 調用孫子組件ProvideAndConsumeSun()}}
}
@Component
struct ProvideAndConsumeSun{@Consume change: string //數據不能初始化 類型要與綁定的@Provide的類型一致build(){Column(){Text('我是孫子組件:'+this.change).ProvideAndConsumeSty(Color.Red,()=>{this.change = "我是孫子組件變化后的值"})}}
}
@Extend(Text) function ProvideAndConsumeSty(color?: string|Color,click?:()=>void){.fontSize(30).fontWeight(FontWeight.Bold).fontColor(color).margin({top:15,bottom:15}).onClick(() => {click()})
}
下圖是代碼運行的效果
然后點擊"我是父組件"文字
然后點擊"孫子組件"文字
