鸿蒙组件通信

组件传值  父 --> 子 @state @Prop 是单向数据流，子组件数据变化不改变父组件中数据值

父:  Home({a:this.arr,b:this.brr});
子:  @Prop a:number[] | array<number>
    @Prop @Watch("updateFun") b:number[] | array<number>updateFun(){
    if(communalMthod.single()){
        this.login =  true; 
    }   
}

组件传值 父 --> 子

@Link($state属性)  组件之间通信时数据流时双向,子级改变父级数据也同步改

父:
@State count1:number = 100;
child({b:$count1})

子:
@Link b:number;
使用时 this.b -=1

@Provide @Consume 子孙级中更改变量的值。爷父级会触发同步更改

父级
 @Provide('isFullScreen') isFullScreen: boolean = false;
子级
 @Consume('isFullScreen') isFullScreen: boolean;

组件传递引用数据类型-对象

父级
import Child04 from '../components/Child04'
import Child05 from '../components/Child05'
import Child06 from '../components/Child06'

@Entry
@Component
struct CompoundExample {

  // @State定义复杂类型
  @State obj: {
    a: number,
    b: { c: number }
  } = { a: 100, b: { c: 200 } }

  // 数组类型
  @State arr: [{
    a: number,
    b: { c: number }
  }] = [{ a: 11, b: { c: 22 } }]

  build() {
    Column() {
      Text('父组件的复杂类型：\r\n' + JSON.stringify(this.obj)).fontSize(15)
      Button('修改obj').onClick(() => {
        // this.obj = {a:99,b:{c:19}} // 监听到
        // this.obj.a = 199 // 监听到
        this.obj.b = { c: 111 } // 监听到
        // this.obj.b.c = 21 // 超过一层则无法监听到
      })
      Child04({ obj: this.obj })
      // 通过@Link方式传递
      Child05({ obj: $obj }).margin({ top: 10 })
      // 数组类型传递
      // Child06({ arr: this.arr })
      Child06({ arr: $arr })
    }.width('100%')
    .border({ width: 1, color: Color.Pink })
  }
}

子级

@Component
export default struct Child04 {
  @Prop obj: {
    a: number,
    b: { c: number }
  }
  build() {
    Column() {
      Text('子组件Child04')
      Text('获取父组件传递的复杂类型：\r\n' + JSON.stringify(this.obj))
      Button('修改父组件obj').onClick(() => {
        // this.obj.a = 99 // 监听到，数据单向传递
        // this.obj.b = { c: 101 } // 监听到
        this.obj.b.c = -1 // 超过一层，无法监听

      })
    }.width('100%')
    .border({ width: 1, color: Color.Red })
  }
}

组件传递数据类型-数组

父组件
import Child04 from '../components/Child04'
import Child05 from '../components/Child05'
import Child06 from '../components/Child06'

@Entry
@Component
struct CompoundExample {

  // @State定义复杂类型
  @State obj: {
    a: number,
    b: { c: number }
  } = { a: 100, b: { c: 200 } }

  // 数组类型
  @State arr: [{
    a: number,
    b: { c: number }
  }] = [{ a: 11, b: { c: 22 } }]

  build() {
    Column() {
      Text('父组件的复杂类型：\r\n' + JSON.stringify(this.obj)).fontSize(15)
      Button('修改obj').onClick(() => {
        // this.obj = {a:99,b:{c:19}} // 监听到
        // this.obj.a = 199 // 监听到
        this.obj.b = { c: 111 } // 监听到
        // this.obj.b.c = 21 // 超过一层则无法监听到
      })
      Child04({ obj: this.obj })
      // 通过@Link方式传递
      Child05({ obj: $obj }).margin({ top: 10 })
      // 数组类型传递
      // Child06({ arr: this.arr })
      Child06({ arr: $arr })
    }.width('100%')
    .border({ width: 1, color: Color.Pink })
  }
}

子级

@Component
export default struct Child06 {
  // @Prop arr: [{
  //   a: number,
  //   b: { c: number }
  // }]

  @Link arr: [{
    a: number,
    b: { c: number }
  }]

  build() {
    Column() {
      Text('子组件Child06通过@Link获取父组件传递的复杂类型arr:' + JSON.stringify(this.arr))
      Button('修改父组件arr').onClick((event: ClickEvent) => {
        // 替换
        // this.arr = [{ a: 101, b: { c: 202 } }]
        // 修改
        this.arr[0].a = 909 // 无效的
      })
    }.width('100%')
    .border({ width: 1, color: Color.Blue })
  }
}

router 路由参数传递

        //创建点击事件
          .onClick(()=>{
            //调用路由函数，进行页面的跳转，除了路径，同时带有一个对象，包括三个键值对元素
              router.pushUrl({
                url:"pages/LifeCircle2",
                params: {
                  id:'001',
                  name:'页面壹',
                  age:25
                }
              })
          })
子组件取值
let pageID = router.getParams()['id'] as string
let pageName = router.getParams()['name']
let pageAge = router.getParams()['age']