官方文檔：@Link裝飾器：父子雙向同步

[Q&A] @Link裝飾器作用

link是雙向數據同步：
父組件修改數據 , 子組件UI更新。
子組件修改數據, 父組件UI更新。

[Q&A] @Link裝飾器特點

1. @Link裝飾器不能在@Entry裝飾的自定義組件中使用。
2. @Link裝飾器禁止初始化。

樣例：簡單類型

class ButtonWidth {width: number = 0;constructor(width: number) {this.width = width;}
}@Component
struct GreenButton {@Link buttonWidth1: ButtonWidth;build() {Button('子 Green Button').width(this.buttonWidth1.width).height(40).backgroundColor('#64bb5c').fontColor('#FFFFFF，90%').onClick(() => {if (this.buttonWidth1.width < 300) {this.buttonWidth1.width += 30;} else {this.buttonWidth1 = new ButtonWidth(180);}})}
}@Entry
@Component
struct PracExample {@State buttonWidth: ButtonWidth = new ButtonWidth(180);build() {Column() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {Button('父 Green Button').width(300).height(40).margin(12).fontColor('#FFFFFF，90%').onClick(() => {this.buttonWidth.width = (this.buttonWidth.width < 300) ? this.buttonWidth.width + 30 : 100;})GreenButton({ buttonWidth1: $buttonWidth }).margin(12)}}}
}

樣例：數組類型

@Component
struct Child {@Link items: number[];build() {Column() {Button(`追加新值`).margin(12).width(312).height(40).fontColor('#FFFFFF，90%').onClick(() => {this.items.push(this.items.length + 1);})Button(`重置`).margin(12).width(312).height(40).fontColor('#FFFFFF，90%').onClick(() => {this.items = [100, 200, 300];})}}
}@Entry
@Component
struct PracExample {@State arr: number[] = [1, 2, 3];build() {Column() {Child({ items: $arr }).margin(12)ForEach(this.arr,(item: number) => {Button(`${item}`).margin(12).width(312).height(40).backgroundColor('#11a2a2a2').fontColor('#e6000000')},(item: ForEachInterface) => item.toString())}}
}

樣例：Map類型

@Component
struct Child {@Link map: Map<number, string>build() {Column() {ForEach(Array.from(this.map.entries()), (item: [number, string]) => {Row() {Text(`${item[0]}`).fontSize(30)Text(`→`).fontSize(30)Text(`${item[1]}`).fontSize(30)}})Button('初始化').width('100%').onClick(() => {this.map = new Map([[0, "a"], [1, "b"], [3, "c"]]);})Button('追加新值').width('100%').onClick(() => {this.map.set(4, "d");})Button('清除').width('100%').onClick(() => {this.map.clear();})Button('修改第1個值').width('100%').onClick(() => {this.map.set(0, "aa");})Button('刪除第一個值').width('100%').onClick(() => {this.map.delete(0);})}}
}@Entry
@Component
struct PracExample {@State message: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]])build() {Column() {Child({ map: this.message })}.width('100%')}
}

樣例：Set類型

@Component
struct Child {@Link message: Set<number>build() {Column() {ForEach(Array.from(this.message.entries()), (item: [number, string]) => {Text(`${item[0]}`).fontSize(30)})Button('init set').width('100%').onClick(() => {this.message = new Set([0, 1, 2, 3, 4]);})Button('set new one').width('100%').onClick(() => {this.message.add(5);})Button('clear').width('100%').onClick(() => {this.message.clear();})Button('刪除元素5').width('100%').onClick(() => {this.message.delete(5);})}.width('100%')}
}@Entry
@Component
struct PracExample {@State message: Set<number> = new Set([0, 1, 2, 3, 4])build() {Column() {Child({ message: this.message })}.width('100%')}
}

樣例：聯合類型

@Component
struct Child {@Link name: string | undefinedbuild() {Column() {Button('子 改名 小芳').width('100%').onClick(() => {this.name = "小芳"})Button('子 改名 undefined').width('100%').onClick(() => {this.name = undefined})}.width('100%')}
}@Entry
@Component
struct PracExample {@State name: string | undefined = "小明"build() {Column() {Text(`名字是 ${this.name}`).fontSize(30)Child({ name: this.name })Button('父 改名 小華').width('100%').onClick(() => {this.name = "小華"})Button('父 改名 undefined').width('100%').onClick(() => {this.name = undefined})}}
}