ArkTS组件通信

父子通信

情况一:子组件只展示父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Prop修饰符 获取变量。

Prop是 「单向传递」,父组件将变量「拷贝」一份交给子组件使用,子组件不可修改变量。

父组件

// 声明变量
@State count:number = 1
// 传值
Son({count:this.count})

子组件

// 接收
 @Prop count:number

情况二:子组件需要修改父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Link修饰符 获取变量。

Link是 「双向传递」,父组件会将变量的「引用」交给子组件,相当于子组件可以直接修改父组件中的变量。

父组件

与Prop不同的是,当子组件使用@Link接收变量时(需要修改变量),父组件传值时需要使用 $

// 声明变量
@State count:number = 1
// 传值
Son({count:$count})

子组件

// 接收
@Link count:number

@Prop和@Link总结

@Prop @Link
同步类型 单向同步 双向同步
允许装饰的变量类型 string、number、boolean、enum类型
父组件对象类型,子组件是对象属性
不可以是数组、any
父子类型一致:string、number、boolean、enum、object、class,以及他们的数组
数组中元素发生变化会引起刷新
嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式 禁止子组件初始化 父组件传递,禁止子组件初始化f

ArkTS组件通信_第1张图片

嵌套对象以及数组元素为对象时如何进行数据同步

@Prop和@Link均无法对 嵌套对象以及数组元素为对象 的场景进行双向数据同步,此时需要使用「@ObjectLink」和「@Observed」装饰器。

操作流程(这里用嵌套对象举例,数组元素为对象的使用情况一致)

  1. @Observed修饰嵌套对象
  2. 参数无法直接使用@ObjectLink修饰
  3. 所以需要封装一个子组件,将该参数传给子组件
  4. 子组件中以变量接收该参数,使用@ObjectLink修饰符修饰后,就可以操作 嵌套对象以及数组元素为对象 了

ArkTS组件通信_第2张图片

跨组件通信

父组件通过 @Provide修饰符 定义变量,子组件通过 @Consume修饰符 获取变量。

不同于@State,父组件「不需要传递参数」,子组件通过 @Consume修饰符 「直接使用变量」即可。

父组件

// 声明状态
@Provide count:number = 1
// 无需传值
Son()

后代组件

// 接收
@Consume count:number

ArkTS组件通信_第3张图片

你可能感兴趣的:(#,ArkTS,Harmony,harmonyos)