HarmonyOS开发之组件通信

---

一、使用@State 和 @Prop （单向绑定）

@Prop装饰器：父子单向同步

限制条件 @Prop装饰器不能在@Entry装饰的自定义组件中使用

• @Prop变量允许在本地修改，但修改后的变化不会同步回父组件

• 当父组件中数据改变时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。

父组件

import Son from '../components/son'
@Entry
@Component
struct Index {
  //定义变量
  @State message: string = '父组件传递值'
  //定义方法 通过此方法可以实现子组件改变父组件值
  changeMessage = ((info:string)=>{
    this.message =info
})
  build() {
    Row() {
      Column() {
          // @ts-ignore
          Son({
            // 父组件传递值
            message: this.message,
            // 父组件传递方法
            changeMessage:this.changeMessage
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

子组件

@Preview
@Component
export default struct Son {
 //输入框的值
 @State sreach:string =''
 // prop接受父组件传的值
 @Prop message:string
 // 重新定义这个方法名 来接收父组件方法
  changeMessage= (info=>{})
  build() {
  Column() {
   	    Flex() {
        Search({placeholder: "请输入内容"})
          .onChange((e)=>{
          //保存输入框的值
            this.sreach = e
          })
        Button("传递")
          .onClick(()=>{
           //调用父组件传递过的方法，改变父组件的值
            this.changeMessage(this.sreach)
          })
          
        //展示父组件传递的值
		Text(this.message)
      }      
      .width("360vp")
      .height("81.87vp")
   }
  }
}

二、使用@State 和 @Link （双向绑定）

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

简单解释，一般父组件在子组件中传递变量，子组件改变变量父组件是不会同步的，
但是使用@link装饰器，就会实现双向绑定，父组件的值也会同步改变

父组件

import Son from '../components/son'
@Entry
@Component
struct Index {
  //使用link传值
  @State list:Array<any> = [1,2,3]
  build() {
    Row() {
      Column() {
        //使用link传值
        Son({
          list:$list
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

子组件

@Preview
@Component
export default struct Son {
  @Link list:Array<any>
  
  build() {
    Column() {
      // @ts-ignore
      List({ space: 10 }) {
        ForEach(this.list, (item: number, index) => {
          ListItem() {
            Text(item.toString())
              .width('100%')
              .padding(10)
              .backgroundColor(Color.Gray)
          }
        })
      }
    }.onClick(() => {
    //点击从list数组push数据，那么父组件也会同步更新
      this.list.push(this.list.length + 1)
    })
    .width("100%")
    .height("100%")
  }
}

三、@Provide装饰器和@Consume装饰器（跨层级通信）

@Provide装饰器和@Consume装饰器 并且数据也是双向绑定的

• @Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。

• @Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。

//父组件
import Son from '../components/son'
@Entry
@Component
struct Index {
  @Provide list:Array<any> = [1,2,3]
  build() {
    Row() {
      Column() {
        //儿子组件
        Son()
        //在父组件本身也能使用定义的数据
        Text(JSON.stringify(this.list))
      }
      .width('100%')
    }
    .height('100%')
  }
}



//子组件
import Sun from './sun'
@Component
export default struct Son {
  @Consume list:Array<any>
  build() {
    Column() {
      // @ts-ignore
      Text(JSON.stringify(this.list),'兒子')
      Sun()
  }
  }
}



//孙子组件
@Component
export default struct Son {
  @Consume list:Array<any>
  build() {
    Column() {
      // @ts-ignore
      Text(JSON.stringify(this.list),'孫子')
        .onClick(()=>{
        //点击事件触发时，父组件中定义的list同步改变，同时其他组件使用list变量，都会被同步改变
          this.list.push(this.list.length+1)
        })
    }
  }
}