[@State](/user/State)和[@Link](/user/Link)是用于组件间状态同步的关键装饰器，二者协同实现父子组件的双向数据绑定

@State与@Link的核心区别

1. 作用域与所有权

@State: 声明组件内部的私有状态，状态所有权属于当前组件。

@Link: 声明与父组件状态变量的双向绑定关系，状态所有权属于父组件。

1. 数据传递方式

@State: 仅在组件内部使用，不能直接传递给子组件。

@Link: 需要通过父组件使用$符号传递@State变量的引用。

3. 数据更新影响

@State: 当@State变量更新时，仅触发当前组件的重新渲染。

@Link: 当@Link变量更新时，会同时更新父组件的@State变量，并触发双方组件的重新渲染。

使用示例

父组件 (Index.ets)

@Entry
@Component
export struct Index {
  // 使用[@State](/user/State)装饰器声明组件内部状态变量
  [@State](/user/State) count: number = 0;

  build() {
    Column {
      Text(`父组件计数: ${this.count}`)
        .fontSize(30)

      Button('父组件增加计数')
        .onClick(() => {
          this.count++;
        })

      // 通过$符号将[@State](/user/State)装饰的变量传递给子组件的[@Link](/user/Link)装饰变量
      ChildComponent({
        childCount: $count
      })
    }
  }
}

子组件 (ChildComponent.ets)

@Component
export struct ChildComponent {
  // 使用[@Link](/user/Link)装饰器声明与父组件状态变量的双向绑定关系
  [@Link](/user/Link) childCount: number;

  build() {
    Column {
      Text('子组件')
        .fontSize(24)

      Text(`子组件接收的计数: ${this.childCount}`)
        .fontSize(26)

      Button('子组件增加计数')
        .onClick(() => {
          this.childCount++;
        })
    }
  }
}

运行效果

1. 父组件和子组件都显示当前的计数值。
2. 点击父组件的按钮，父组件和子组件的计数值都会更新。
3. 点击子组件的按钮，父组件和子组件的计数值也都会更新。

这体现了[@State](/user/State)与[@Link](/user/Link)之间的双向数据绑定关系。