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

官方文档：@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 | undefined

  build() {
    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
        })
    }
  }
}