[TOC] ## @State狀態管理組件內部 類似vue 的 state 狀態管理 示例 ``` @Entry @Component struct MyComponent { @State count: number = 0; build() { Button(`click times: ${this.count}`) .onClick(() => { this.count += 1; }) } } ``` **裝飾class對象類型的變量** ``` class Model { public value: string; constructor(value: string) { this.value = value; } } @Entry @Component struct EntryComponent { build() { Column() { // 此處指定的參數都將在初始渲染時覆蓋本地定義的默認值，并不是所有的參數都需要從父組件初始化 MyComponent({ count: 1, increaseBy: 2 }) MyComponent({ title: new Model('Hello, World 2'), count: 7 }) } } } @Component struct MyComponent { @State title: Model = new Model('Hello World'); @State count: number = 0; private increaseBy: number = 1; build() { Column() { Text(`${this.title.value}`) Button(`Click to change title`).onClick(() => { // @State變量的更新將觸發上面的Text組件內容更新 this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI'; }) Button(`Click to increase count=${this.count}`).onClick(() => { // @State變量的更新將觸發該Button組件的內容更新 this.count += this.increaseBy; }) } } } ``` ## @Prop 父子單項同步 子組件的變化不會傳給父組件,但是父組件的狀態會同步給子組件 ``` @Component struct CountDownComponent { @Prop count: number; costOfOneAttempt: number = 1; build() { Column() { if (this.count > 0) { Text(`You have ${this.count} Nuggets left`) } else { Text('Game over!') } // @Prop裝飾的變量不會同步給父組件 Button(`Try again`).onClick(() => { this.count -= this.costOfOneAttempt; }) } } } @Entry @Component struct ParentComponent { @State countDownStartValue: number = 10; build() { Column() { Text(`Grant ${this.countDownStartValue} nuggets to play.`) // 父組件的數據源的修改會同步給子組件 Button(`+1 - Nuggets in New Game`).onClick(() => { this.countDownStartValue += 1; }) // 父組件的修改會同步給子組件 Button(`-1 - Nuggets in New Game`).onClick(() => { this.countDownStartValue -= 1; }) CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 }) } } } ``` ## @Link裝飾器 父子雙向同步 ``` class GreenButtonState { width: number = 0; constructor(width: number) { this.width = width; } } @Component struct GreenButton { @Link greenButtonState: GreenButtonState; build() { Button('Green Button') .width(this.greenButtonState.width) .height(150.0) .backgroundColor('#00ff00') .onClick(() => { if (this.greenButtonState.width < 700) { // 更新class的屬性，變化可以被觀察到同步回父組件 this.greenButtonState.width += 125; } else { // 更新class，變化可以被觀察到同步回父組件 this.greenButtonState = new GreenButtonState(100); } }) } } @Component struct YellowButton { @Link yellowButtonState: number; build() { Button('Yellow Button') .width(this.yellowButtonState) .height(150.0) .backgroundColor('#ffff00') .onClick(() => { // 子組件的簡單類型可以同步回父組件 this.yellowButtonState += 50.0; }) } } @Entry @Component struct ShufflingContainer { @State greenButtonState: GreenButtonState = new GreenButtonState(300); @State yellowButtonProp: number = 100; build() { Column() { // 簡單類型從父組件@State向子組件@Link數據同步 Button('Parent View: Set yellowButton') .onClick(() => { this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100; }) // class類型從父組件@State向子組件@Link數據同步 Button('Parent View: Set GreenButton') .onClick(() => { this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100; }) // class類型初始化@Link GreenButton({ greenButtonState: $greenButtonState }) // 簡單類型初始化@Link YellowButton({ yellowButtonState: $yellowButtonProp }) } } } ``` ## @Provide裝飾器和@Consume裝飾器 與后代組件雙向同步,父組件可以被多個層級后的子組件調用 ``` @Component struct CompD { // @Consume裝飾的變量通過相同的屬性名綁定其祖先組件CompA內的@Provide裝飾的變量 @Consume reviewVotes: number; build() { Column() { Text(`reviewVotes(${this.reviewVotes})`) Button(`reviewVotes(${this.reviewVotes}), give +1`) .onClick(() => this.reviewVotes += 1) } .width('50%') } } @Component struct CompC { build() { Row({ space: 5 }) { CompD() CompD() } } } @Component struct CompB { build() { CompC() } } @Entry @Component struct CompA { // @Provide裝飾的變量reviewVotes由入口組件CompA提供其后代組件 @Provide reviewVotes: number = 0; build() { Column() { Button(`reviewVotes(${this.reviewVotes}), give +1`) .onClick(() => this.reviewVotes += 1) CompB() } } } ``` ## @Observed裝飾器和@ObjectLink裝飾器