Harmony OS 父子组件传参-编程知识

Harmony OS 父子组件传参

Harmony OS 父子组件传参案例

一、@Prop：从父组件单向同步状态

类似于vue的prop传参，只能父组件传参给子组件

当点击父组件的按钮时，改变message值，参数跟着更新。并且子组件也跟着更新（前提是要子组件加上@prop装饰器并且参数名称一致）。

当点击子组件按钮想要改变message时，父组件的message改变不了，只能改变子组件的参数

父组件代码：

import propTest from "../view/propTest"
@Entry
@Component
struct UseProp {@State message: string = '父组件prop'build() {Column() {Text(this.message).fontSize(22).fontWeight(FontWeight.Bold)propTest({message:this.message})Button('父组件按钮--变').onClick((event: ClickEvent) => {this.message="父组件事件触发-变"})}.width('100%')}}

子组件代码：

@Component
export default struct propTest {@Prop message: string ;build() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).fontColor(Color.Green)Button('子组件按钮').onClick((event: ClickEvent) => {this.message="子组件变化"}).backgroundColor(Color.Green)}.width('100%')}}

图1.运行时效果图图2.点击父组件按钮时图3.点击子组件按钮时

二、与父组件双向同步状态：@Link

若是父子组件状态需要相互绑定进行双向同步时，可以使用@Link装饰器。父组件中用于初始化子组件@Link变量的必须是在父组件中定义的状态变量。

当父组件点击按钮时父子组件的参数同时会+2

当子组件点击按钮时父子组件的参数同时会-1

这样就实现了数据双向同步（注意传参$clickIndex加$。完成在父子组件中定义状态后，最关键的就是要建立父子组件的双向关联关系。在父组件中使用子组件时，将父组件的clickIndex传递给子组件的clickIndex。其中父组件的clickIndex加上$表示传递的是引用）

import propTest from "../view/propTest"
@Entry
@Component
struct UseProp {@State message: string = '父组件prop'@State clickIndex: number = 0build() {Column() {Text('clickIndex:'+this.clickIndex).fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Brown)Button('爸爸+2').onClick((event: ClickEvent) => {this.clickIndex+=2}).backgroundColor(Color.Brown)propTest({message:this.message,clickIndex:$clickIndex})}.width('100%')}
}

子组件

@Component
export default struct propTest {@Prop message: string ;@Link clickIndex:number;build() {Column() {Text('clickIndex:'+this.clickIndex).fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Green)Button('儿子-1').onClick((event: ClickEvent) => {this.clickIndex-=1}).backgroundColor(Color.Green)}.width('100%')}}

拓展：@watch监听属性

将上述的子组件的clickIndex加上监听器，当clickIndex变化时触发自定义回调函数onClickIndexChanged。函数可以加自己逻辑，比如现在是当clickIndex要小于0时会弹出提示，并且不能为负数。

注意：watch不仅仅是能监听 link修饰符的参数的，@State 、@prop其他的修饰符也能监听

import prompt from '@system.prompt';
@Component
export default struct propTest {@Prop message: string ;@Link @Watch('onClickIndexChanged') clickIndex:number;onClickIndexChanged(){if(this.clickIndex<0){prompt.showToast({message:"数量不能小于0"})this.clickIndex=0}}build() {Column() {Text('clickIndex:'+this.clickIndex).fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Green)Button('儿子-1').onClick((event: ClickEvent) => {this.clickIndex-=1}).backgroundColor(Color.Green)}.width('100%')}}