HarmonyOS鸿蒙Next中State和Link这两个有什么区别

HarmonyOS鸿蒙Next中State和Link这两个有什么区别 我在写一个父子组件，父组件里有个变量用@State，具体在什么场景下必须用Link而不能用Prop？传值时有什么固定格式吗？

9 回复

开发者您好，@Link主要用于父子组件的双向同步，@Prop主要用于父组件向子组件的单向同步。

既：@Link既能将父组件的修改同步到子组件，也能将子组件内的修改同步回父组件，而@Prop只能将父组件的修改同步到子组件，但是没办法把子组件的修改同步回父组件。

其它传参类型差异及注意事项详情参考官方文档限制条件及常见使用场景：

如果上述未能解决您的问题，请您再反馈。

更多关于HarmonyOS鸿蒙Next中State和Link这两个有什么区别的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


父子间需要双向传递的就需要link，单纯透传参数就prop

必须用Link的场景：这个变量A在父组件更新了，子组件也必须更新。或者，子组件的这个变量A更新了，父组件也要更新页面。

传参格式：子组件和父组件统一变量类型

必须用Prop的场景：这个变量A在父组件更新了，子组件也必须更新。或者，子组件的这个变量A更新了，父组件不要更新页面。

Q1: 没有什么场景一定要@Link, 即使想要直接修改父组件中的变量, 也可以通过子组件事件传出来修改(写法代码多一些)

简单理解(Link 双向同步, Prop 单向同步):
@Link 只是传递引用, 实际就是父组件中的变量, 在子组件中修改, 就是直接修改的父组件中的变量的值.
@Prop 传递的是值, 相当于复制一个父组件中的变量, 当子组件中修改对应的变量, 父组件中的原变量值是不变的.

Q2: 没有什么固定格式.

参考文档:
[@Prop 连接](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-prop) , [@Link 连接](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-link)

父组件的变量需要和子组件的数据双向绑定就用Link，只是传参数的话子组件用Prop就可以

Link 会将变化传给父组件

@Link是父子间双向传递，被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。父组件改变，会通知所有的@Link，同时@Link的更新也会通知父组件的数据源进行刷新。

@Prop是父子间单向传递，@Prop装饰的变量可以和父组件建立单向同步关系。子组件会深拷贝父组件数据，可从父组件更新，也可自己更新数据，但不会同步回父组件。

@Link、@Prop通过与@State通过装饰同名变量来建立联系

//父组件内变量 @State param:string=‘param’

//子组件内变量 @Link param:string @Prop param:string

State是组件内部状态，Link是父子组件间双向数据绑定。State修饰的变量变化会触发所在组件UI更新，Link修饰的变量用于父子组件间同步数据，子组件修改Link变量会同步更新父组件对应数据源。State适用于组件自身状态管理，Link用于跨组件数据传递。

在HarmonyOS Next中，@State和@Link是ArkUI框架中用于管理组件状态的两个关键装饰器，它们的核心区别在于数据所有权和同步方向。

主要区别：

  1. 数据所有权与初始化

    • @State：装饰的变量是组件内部私有的状态数据。它由组件自身初始化和管理，变化仅触发本组件及其子组件的UI更新。
    • @Link：装饰的变量是与其他组件（通常是父组件）共享的状态数据。它必须从父组件初始化（通过引用父组件@State、@Link或其他提供器变量），本质上是建立了对父组件某个状态变量的双向绑定引用。

  2. 数据流方向

    • @State：支持单向和双向绑定。当与子组件的@Prop绑定时是单向（父到子）；当与子组件的@Link绑定时是双向。
    • @Link：主要用于双向绑定。子组件通过@Link修改数据，变更会同步回父组件对应的源状态变量，并触发所有相关组件的UI更新。

必须使用@Link的场景： 在你的父子组件场景中，当子组件需要直接修改父组件传递过来的状态数据，并且这个修改需要即时反馈、更新到父组件和其他可能绑定此数据的兄弟组件时，就必须使用@Link。如果子组件只需要读取父组件数据并独立处理副本，则应使用@Prop。

传值格式： 在父组件中，通过组件标签的属性将@State变量引用传递给子组件的@Link变量。格式如下：

// 父组件
@State parentState: number = 0;

build() {
  Column() {
    // 使用 '$' 符号传递对状态变量的引用，实现双向绑定
    ChildComponent({ childLink: $parentState })
  }
}

// 子组件
@Link childLink: number;

build() {
  // 子组件内可直接修改 childLink，父组件中的 parentState 会同步更新
  Button(`点击增加: ${this.childLink}`)
    .onClick(() => {
      this.childLink += 1; // 此修改会同步回父组件的 parentState
    })
}

总结：

  • @State是局部状态源，@Link是其跨组件的双向引用。
  • 子组件要修改并同步回父组件状态时用@Link；只需读取或局部修改副本时用@Prop。
  • 传值时，父组件使用$符号传递状态变量引用（如$parentState）给子组件的@Link参数。
回到顶部