@Link 的作用(看这一篇就够了)

最新推荐文章于 2025-07-16 11:24:05 发布

Henry0818_

最新推荐文章于 2025-07-16 11:24:05 发布

阅读量934

点赞数 18

CC 4.0 BY-SA版权

文章标签：华为 harmonyos 华为云华为od

本文链接：https://blog.youkuaiyun.com/Henry0818_/article/details/146164266

1. @Link 的作用
- 双向数据绑定：子组件中的变量（被 @Link 修饰）会与父组件的数据源（通常是 @State 变量）保持同步。变化感知：当数据发生变化时，父组件和子组件都能感知并触发 UI 更新。

2. 与 @State 的关系
- @State：在父组件中定义，管理组件内部状态，支持响应式更新。 @Link：在子组件中使用，引用父组件的 @State 变量，实现双向数据同步。
- @Entry @Component struct ParentComponent { @State parentCount: number = 0; build() { Column() { Button("Increase Parent Count") .onClick(() => { this.parentCount += 1; }) ChildComponent({ childCount: this.parentCount }) } } } @Component struct ChildComponent { @Link childCount: number; build() { Column() { Button("Increase Child Count") .onClick(() => { this.childCount += 1; // 影响父组件的 parentCount }) Text(`Child Count: ${this.childCount}`) } } }
```
@Entry
@Component
struct ParentComponent {
  @State parentCount: number = 0;

  build() {
    Column() {
      Button("Increase Parent Count")
        .onClick(() => {
          this.parentCount += 1;
        })
      ChildComponent({ childCount: this.parentCount })
    }
  }
}

@Component
struct ChildComponent {
  @Link childCount: number;

  build() {
    Column() {
      Button("Increase Child Count")
        .onClick(() => {
          this.childCount += 1;  // 影响父组件的 parentCount
        })
      Text(`Child Count: ${this.childCount}`)
    }
  }
}
```
- 点击子组件的按钮，父组件的 parentCount 也会同步增加。点击父组件的按钮，子组件的 childCount 也会同步增加。

3. @Link 变量的类型
- 支持的数据类型：基础类型：string、number、boolean、enum 对象类型：Object、class 集合类型（API 11+）：Map、Set 特殊类型（ArkUI 定义）：Length、ResourceStr、ResourceColor 不支持 any 类型支持联合类型（API 11+）：string | number、ClassA | null 等

4. 使用 @Link 需要注意的点
- @Link 变量不能本地初始化： typescript // ❌ 错误示例，编译报错 @Link count: number = 10; typescript // ✅ 正确示例 @Link count: number;
- @Link 变量的类型必须和父组件的数据源类型一致，否则运行时报错 typescript class Info { info: string = 'Hello'; } class Cousin { name: string = 'Hello'; } @Component struct Child { // ❌ 错误示例，类型不匹配 @Link test: Cousin; } @Entry @Component struct Parent { @State info: Info = new Info(); build() { // ❌ 错误示例，@Link 变量类型与 @State 不匹配 Child({ test: new Cousin() }); } }

@Link 变量不能由常量初始化 typescript 复制编辑 @State message: string = "Hello"; @State info: Info = new Info(); @Component struct Child { @Link msg: string; @Link info: Info; } @Entry @Component struct Parent { build() { // ❌ 错误写法，msg 不能用字符串直接初始化 Child({ msg: "World", info: this.info.info }); } }

5. 观察数据变化

@Entry
@Component
struct Parent {
  @State selectedDate: Date = new Date('2021-08-08');

  build() {
    Column() {
      DateComponent({ selectedDate: this.selectedDate })
    }
  }
}

@Component
struct DateComponent {
  @Link selectedDate: Date;

  build() {
    Column() {
      Button("Increase Year")
        .onClick(() => {
          this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1);
        })
    }
  }
}

6. @Link 的使用场景

1️⃣ 基本类型的双向同步
typescript

@Component
struct YellowButton {
  @Link yellowButtonState: number;

  build() {
    Button('Yellow Button')
      .width(this.yellowButtonState)
      .onClick(() => {
        this.yellowButtonState += 40; // 影响父组件
      })
  }
}

2️⃣ 对象类型的同步
typescript

class GreenButtonState {
  width: number = 180;
}

@Component
struct GreenButton {
  @Link greenButtonState: GreenButtonState;

  build() {
    Button('Green Button')
      .width(this.greenButtonState.width)
      .onClick(() => {
        this.greenButtonState.width += 60; // 影响父组件
      })
  }
}

3️⃣ 数组类型的双向同步
typescript

@Component
struct Child {
  @Link items: number[];

  build() {
    Column() {
      Button("Add Item").onClick(() => {
        this.items.push(this.items.length + 1);
      })
    }
  }
}

@Entry
@Component
struct Parent {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Child({ items: $arr })
    }
  }
}