父子组件传值的几种方式
概述
当我们在鸿蒙开发中需要再父子组件或者兄弟组件之间传值时,可以参考下面的几种方式哦
环境描述
开发环境:Windows 10
DevEco Studio 版本:DevEco Studio 5.0.0 Release(5.0.3.910)
SDK 版本:5.0.0.70(Full SDK)
设备型号:黄鹂
系统版本:OpenHarmony 5.0.0.710
传值方式:
1.@Prop装饰器:父子单向同步
@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。
允许装饰的变量类型:Prop 支持类型和State修饰符基本一致,并且Prop可以给初始值,也可以不给
@Prop装饰器不能在 @Entry装饰的自定义组件中使用。
允许本地初始化,也可以不初始化(父组件必须传参)
子组件仍然可以通过修改自己来更新UI,但不会通知父组件(单向),父组件改变后会覆盖子组件自己的值
2.@Link装饰器:父子双向同步
@Prop装饰的变量可以和父组件建立单向的同步关系。
@Prop装饰的变量是可变的,但是变化不会同步回其父组件。
Prop 支持类型和State修饰符基本一致,并且Prop可以给初始值,也可以不给
@Prop装饰器不能在 @Entry装饰的自定义组件中使用。
允许本地初始化,也可以不初始化(父组件必须传参)
子组件仍然可以通过修改自己来更新UI,但不会通知父组件(单向),父组件改变后会覆盖子组件自己的值
3.@Link装饰器:父子双向同步
@Link装饰的变量与其父组件中的数据源共享相同的值。子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
link支持类型和State修饰符也是基本一致
@Link装饰器禁止本地初始化。
@Link装饰的变量的类型要和数据源类型保持一致,否则框架会抛出运行时错误。
@Link不支持装饰Function类型的变量,框架会抛出运行时错误。
父组件传值时传的必须是Link或者State修饰的数据
4.@Provide装饰器、@Consume:后代组件双向同步(较推荐)
@Provide和@Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,@Provide和@Consume摆脱参数传递机制的束缚,实现跨层级传递。
后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步。
@Provide装饰变量的初始值必须指定、@Consume装饰变量的初始值禁止本地初始化。
@Provider/@Consumer的参数key必须为string类型,否则编译期会报错。 在不指定Provide名称的情况下,需要使用相同的名字来定义和接收数据。
5.@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。
@Observed:装饰class。需要放在class的定义前,使用new创建类对象。 @ObjectLink:必须为被@Observed装饰的class实例,必须指定类型。 @ObjectLink不支持简单类型,如果需要使用简单类型,可以使用@Prop。
在子组件中给@ObjectLink装饰的变量赋值是不允许的。
@ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
@Observed装饰的类,如果其属性为非简单类型,比如class、Object或者数组,也需要被@Observed装饰,否则将观察不到其属性的变化。
@ObjectLink装饰的变量类型需要为显式的被@Observed装饰的类,如果未指定类型,或其不是@Observed装饰的class,编译期会报错。
更多推荐
所有评论(0)