【鸿蒙学习笔记】@Link装饰器：父子双向同步

官方文档：@Link装饰器：父子双向同步

目录标题

[Q&A] @Link装饰器作用
[Q&A] @Link装饰器特点
样例：简单类型
样例：数组类型
样例：Map类型
样例：Set类型
样例：联合类型

[Q&A] @Link装饰器作用

link是双向数据同步：
父组件修改数据 , 子组件UI更新。
子组件修改数据, 父组件UI更新。

[Q&A] @Link装饰器特点

@Link装饰器不能在@Entry装饰的自定义组件中使用。
@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})}}
}