HarmonyOS NEXT应用开发之@Link装饰器:父子双向同步

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

说明:

从API version 9开始,该装饰器支持在ArkTS卡片中使用。

概述

@Link装饰的变量与其父组件中的数据源共享相同的值。

限制条件

  • @Link装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则说明

@Link变量装饰器 说明
装饰器参数
同步类型 双向同步。
父组件中@State, @StorageLink和@Link 和子组件@Link可以建立双向数据同步,反之亦然。
允许装饰的变量类型 Object、class、string、number、boolean、enum类型,以及这些类型的数组。
支持Date类型。
API11及以上支持Map、Set类型。支持类型的场景请参考 观察变化 。
API11及以上支持上述支持类型的联合类型,比如string | number, string | undefined 或者 ClassA | null,示例见 Link支持联合类型实例 。
注意
当使用undefined和null的时候,建议显式指定类型,遵循TypeScipt类型校验,比如:@Link a : string | undefined

支持AkrUI框架定义的联合类型Length、ResourceStr、ResourceColor类型。
类型必须被指定,且和双向绑定状态变量的类型相同。
不支持any。
被装饰变量的初始值 无,禁止本地初始化。

变量的传递/访问规则说明

传递/访问 说明
从父组件初始化和更新 必选。与父组件@State, @StorageLink和@Link 建立双向绑定。允许父组件中@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰变量初始化子组件@Link。
从API version 9开始,@Link子组件从父组件初始化@State的语法为Comp({ aLink: this.aState })。同样Comp({aLink: $aState})也支持。
用于初始化子组件 允许,可用于初始化常规变量、@State、@Link、@Prop、@Provide。
是否支持组件外访问 私有,只能在所属组件内访问。

图1 初始化规则图示

观察变化和行为表现

观察变化

  • 当装饰的数据类型为boolean、string、number类型时,可以同步观察到数值的变化,示例请参考 简单类型和类对象类型的@Link。

  • 当装饰的数据类型为class或者Object时,可以观察到赋值和属性赋值的变化,即Object.keys(observedObject)返回的所有属性,示例请参考 简单类型和类对象类型的@Link 。

  • 当装饰的对象是array时,可以观察到数组添加、删除、更新数组单元的变化,示例请参考数组类型的@Link

  • 当装饰的对象是Date时,可以观察到Date整体的赋值,同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。

@Component
struct DateComponent {
   
   
  @Link selectedDate: Date;

  build() {
   
   
    Column() {
   
   
      Button(`child increase the year by 1`).onClick(() => {
   
   
        this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1)
      })
      Button('child update the new date')
        .margin(10)
        .onClick(() => {
   
   
          this.selectedDate = new Date('2023-09-09')
        })
      DatePicker({
   
   
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
    }

  }
}

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

  build() {
   
   
    Column() {
   
   
      Button('parent increase the month by 1')
        .margin(10)
        .onClick(() => {
   
   
          this.parentSelectedDate.setMonth(this.parentSelectedDate.getMonth() + 1)
        })
      Button('parent update the new date')
        .margin(10)
        .onClick(() => {
   
   
          this.parentSelectedDate = new Date('2023-07-07')
        })
      DatePicker({
   
   
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.parentSelectedDate
      })

      DateComponent({
   
    selectedDate:this.parentSelectedDate })
    }
  }
}
  • 当装饰的变量是Map时,可以观察到Map整体的赋值,同时可通过调用Map的接口set, clear, delete 更新Map的值。

  • 当装饰的变量是Set时,可以观察到Set整体的赋值,同时可通过调用Set的接口add, clear, delete 更新Set的值。

框架行为

@Link装饰的变量和其所属的自定义组件共享生命周期。

为了了解@Link变量初始化和更新机制,有必要先了解父组件和拥有@Link变量的子组件的关系,初始渲染和双向更新的流程(以父组件为@State为例)。

  1. 初始渲染:执行父组件的build()函数后将创建子组件的新实例。初始化过程如下:

    1. 必须指定父组件中的@State变量,用于初始化子组件的@Link变量。子组件的@Link变量值与其父组件的数据源变量保持同步(双向数据同步)。
    2. 父组件的@State状态变量包装类通过构造函数传给子组件,子组件的@Link包装类拿到父组件的@State的状态变量后,将当前@Link包装类this指针注册给父组件的@State变量。
  2. @Link的数据源的更新:即父组件中状态变量更新,引起相关子组件的@Link的更新。处理步骤:

    1. 通过初始渲染的步骤可知,子组件@Link包装类把当前this指针注册给父组件。父组件@State变量变更后,会遍历更新所有依赖它的系统组件(elementid)和状态变量(比如@Link包装类)。
    2. 通知@Link包装类更新后,子组件中所有依赖@Link状态变量的系统组件(elementId)都会被通知更新。以此实现父组件对子组件的状态数据同步。
  3. @Link的更新:当子组件中@Link更新后,处理步骤如下(以父组件为@State为例):

    1. @Link更新后,调用父组件的@State包装类的set方法,将更新后的数值同步回父组件。
    2. 子组件@Link和父组件@State分别遍历依赖的系统组件,进行对应的UI的更新。以此实现子组件@Link同步回父组件@State。

使用场景

简单类型和类对象类型的@Link

以下示例中,点击父组件ShufflingContainer中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”,可以从父组件将变化同步给子组件。

1.点击子组件GreenButton和YellowButton中的Button,子组件会发生相应变化,将变化同步给父组件。因为@Link是双向同步,会将变化同步给@State。

2.当点击父组件ShufflingContainer中的Button时,@State变化,也会同步给@Link,子组件也会发生对应的刷新。

class GreenButtonState {
   
   
  width: number = 0;

  constructor(width: number) {
   
   
    this.width = width;
  }
}

@Component
struct GreenButton {
   
   
  @Link greenButtonState: GreenButtonState;

  build() {
   
   
    Button('Green Button')
      .width(this.greenButtonState.width)
      .height(40)
      .backgroundColor('#64bb5c')
      .fontColor
<think>好的,我需要回答用户关于鸿蒙系统中组件间传值的方法和示例的问题。首先,我需要回忆一下鸿蒙系统的组件架构和数据传递机制。根据提供的参考引用,鸿蒙Next提供了多种组件间传递数据的方式,包括父子、子父、兄弟以及非相关组件之间的通信。 首先,父子组件传值通常通过Props(属性)来实现。父组件向子组件传递数据时,子组件通过@Prop装饰器来接收。这一步需要确认@Prop的使用方法和示例代码是否正确,比如子组件中定义@Prop变量,父组件在调用时传递对应的值。 然后是子组件向父组件传值,这通常通过自定义事件和回调函数。子组件使用@Link或@Watch装饰器来监听数据变化,并通过事件触发父组件中的方法。需要检查是否应该使用@Emit装饰器来触发事件,或者是否有其他机制,比如状态变量的双向绑定。 对于兄弟组件之间的传值,常见的方法是使用共同的父组件作为中介,或者使用全局状态管理。例如,父组件维护一个状态变量,两个子组件分别通过@Prop和@Link来读取和更新这个变量。这样,当其中一个子组件修改了变量,另一个子组件会自动更新。 非相关组件之间的传值可能需要使用全局的事件总线或应用级别的状态管理,比如AppStorage。AppStorage允许不同组件共享数据,通过@StorageLink和@StorageProp装饰器来访问和修改全局数据。需要确认这些装饰器的具体用法,并给出示例代码。 接下来,需要确保每个方法都有对应的代码示例,并且语法正确。比如,父子组件传值的示例应该展示父组件如何传递数据,子组件如何接收。子父组件传值的例子可能需要展示事件触发和回调。兄弟组件的例子应该包括共同的父组件状态,而全局状态管理的例子则需要使用AppStorage。 另外,用户可能关心实际应用中的最佳实践和常见问题,比如性能考虑、数据同步的机制等。需要简要提及这些方面,以帮助开发者选择合适的方法。 最后,生成相关问题时要覆盖用户可能进一步询问的方向,比如性能优化、不同方法的优缺点比较,以及实际应用场景的例子。确保问题具体且有针对性,能够引导用户深入学习。 现在需要整合这些思路,按照用户的要求用中文回答,结构清晰,分点说明,并附上代码示例。同时,确保所有数学表达式和公式使用正确的LaTeX格式,虽然在这个问题中可能用不到,但需要注意其他格式要求,如代码块使用反引号包裹,引用标识正确添加。</think>在鸿蒙HarmonyOS中,组件间传值可通过多种方式实现,以下是主要方法及示例: --- ### 一、父子组件传值(Props) 父组件通过属性直接向子组件传递数据,子组件使用`@Prop`装饰器接收。 ```typescript // 子组件 ChildComponent.ets @Entry @Component struct ChildComponent { @Prop message: string = "" // 接收父组件的值 build() { Text(this.message) // 显示"来自父组件的消息" } } // 父组件 ParentComponent.ets @Entry @Component struct ParentComponent { @State parentMessage: string = "来自父组件的消息" build() { Column() { ChildComponent({ message: this.parentMessage }) // 传递数据 } } } ``` --- ### 二、子父组件传值(自定义事件) 通过`自定义事件`和`@Link`实现子组件向父组件传递数据[^1]。 ```typescript // 子组件 ChildComponent.ets @Component struct ChildComponent { @Link @Watch("onMessageChange") childMessage: string onMessageChange() { console.log("值已更新至父组件") } build() { Button("修改值").onClick(() => { this.childMessage = "子组件新值" }) } } // 父组件 ParentComponent.ets @Entry @Component struct ParentComponent { @State parentMessage: string = "初始值" build() { Column() { Text(this.parentMessage) // 显示更新后的值 ChildComponent({ childMessage: $parentMessage }) // 双向绑定 } } } ``` --- ### 三、兄弟组件传值(公共父组件) 通过父组件作为中介,使用`@Provide`和`@Consume`装饰器: ```typescript // 父组件 ParentComponent.ets @Entry @Component struct ParentComponent { @Provide("sharedData") sharedMessage: string = "共享数据" build() { Column() { ChildComponentA() ChildComponentB() } } } // 子组件A ChildComponentA.ets @Component struct ChildComponentA { @Consume("sharedData") sharedData: string build() { Button("更新数据").onClick(() => { this.sharedData = "A组件更新的值" }) } } // 子组件B ChildComponentB.ets @Component struct ChildComponentB { @Consume("sharedData") sharedData: string build() { Text(this.sharedData) // 显示A组件更新的值 } } ``` --- ### 四、非相关组件传值(AppStorage) 使用全局状态管理工具`AppStorage`: ```typescript // 组件A ComponentA.ets @Entry @Component struct ComponentA { @StorageLink("globalData") globalMessage: string = "" build() { Button("设置全局值").onClick(() => { this.globalMessage = "全局数据" }) } } // 组件B ComponentB.ets @Entry @Component struct ComponentB { @StorageProp("globalData") globalMessage: string = "" build() { Text(this.globalMessage) // 显示"全局数据" } } ``` --- ### 五、事件总线(进阶用法) 通过`Emitter`实现跨组件事件通信: ```typescript // 创建事件总线 export const emitter = new Emitter(); // 发送方组件 Button("发送事件").onClick(() => { emitter.emit("myEvent", { data: "事件数据" }); }); // 接收方组件 emitter.on("myEvent", (data) => { console.log("收到数据:" + data); }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值