HarmonyOS 鸿蒙Next中搞懂@Link装饰器的正确用法及避坑指南

【鸿蒙ArkTS开发指南】搞懂@Link装饰器的正确用法及避坑指南

🔍 问题定位：为什么出现regular property cannot be assigned to [@Link](/user/Link) property？

1. 未使用$符号传递状态
   @Link必须通过$stateVar语法引用父组件的状态变量（）

2. 类型声明缺失
   子组件中@Link变量未声明类型或与父组件类型不一致（[1,14]）

3. 嵌套对象未优化
   未用@Observed装饰器观察类属性变化（[3,12]）

🛠️ 场景实现与代码示范

场景1：父子组件双向同步任务标题

// 定义数据模型（必须用[@Observed](/user/Observed)装饰类）
[@Observed](/user/Observed)
class Task {
  id: number;
  title: string;

  constructor(id: number, title: string) {
    this.id = id;
    this.title = title;
  }
}

// 父组件
@Entry
@Component
struct ParentComponent {
  [@State](/user/State) currentTask: Task = new Task(1, '学习ArkTS');

  build() {
    Column() {
      TaskItem({ task: $currentTask }) // ✅ 关键点：使用$传递
      Text(`父组件标题：${this.currentTask.title}`)
    }
  }
}

// 子组件
@Component
struct TaskItem {
  [@Link](/user/Link) task: Task; // ✅ 显式声明类型

  build() {
    TextInput(this.task.title)
      .onChange((value) => {
        this.task.title = value; // 修改实时同步到父组件
      })
  }
}

场景2：任务列表的双向同步

// 父组件维护列表
@Entry
@Component
struct TaskListPage {
  [@State](/user/State) tasks: Task[] = [
    new Task(1, '需求分析'),
    new Task(2, '代码开发')
  ];

  build() {
    Column() {
      TaskListView({ items: $tasks }) // 传递整个数组
    }
  }
}

// 列表视图组件
@Component
struct TaskListView {
  [@Link](/user/Link) items: Task[];

  build() {
    List() {
      ForEach(this.items, (item: Task) => {
        ListItem() {
          TaskItem({ task: $item }) // 逐项传递
        }
      }, (item: Task) => item.id.toString())
    }
  }
}

📊 三大装饰器核心差异对比

⚠️ 关键使用规范

1. 初始化铁律

// ✅ 正确写法（必须带$符号）
ChildComponent({ linkProp: $parentState })

// ❌ 错误写法（导致regular property错误）
ChildComponent({ linkProp: parentState })

1. 嵌套对象处理

   • 类必须用@Observed装饰
   • 深层属性修改需用@ObjectLink（[3,12]）

2. 数组更新技巧

// ❌ 错误：直接修改元素不触发更新
this.tasks.title = '新标题';

// ✅ 正确：创建新数组触发更新
this.tasks = this.tasks.map(item => 
  item.id === 1 ? new Task(1, '新标题') : item
);

💡 高频问题解决方案

问题：修改@Link对象属性后界面未刷新方案：

1. 检查类是否用@Observed装饰
2. 确保通过set方法修改属性（1）

// 在[@Observed](/user/Observed)类中定义set方法
[@Observed](/user/Observed)
class Task {
  private _title: string = '';
  
  set title(value: string) {
    this._title = value;
  }
}

参考来源:[@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)