父子通信
情况一:子组件只展示
父组件中的状态
父组件通过 @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 |
嵌套对象以及数组元素为对象时如何进行数据同步
@Prop和@Link均无法对 嵌套对象以及数组元素为对象 的场景进行双向数据同步,此时需要使用「@ObjectLink」和「@Observed」装饰器。
操作流程(这里用嵌套对象举例,数组元素为对象的使用情况一致)
- @Observed修饰嵌套对象
- 参数无法直接使用@ObjectLink修饰
- 所以需要封装一个子组件,将该参数传给子组件
- 子组件中以变量接收该参数,使用@ObjectLink修饰符修饰后,就可以操作 嵌套对象以及数组元素为对象 了
跨组件通信
父组件通过 @Provide修饰符 定义变量,子组件通过 @Consume修饰符 获取变量。
不同于@State,父组件「不需要传递参数」,子组件通过 @Consume修饰符 「直接使用变量」即可。
父组件
// 声明状态
@Provide count:number = 1
// 无需传值
Son()
后代组件
// 接收
@Consume count:number