1.@Prop装饰变量

@Prop装饰的变量可以和父亲组件建立单向的同步关系，@Prop 装饰的变量是可变的，但是变化不会同步回其父组件。

例如：

@Component
struct mayButton {

  //@Prop将子组件与父组件进行绑定，所以他们两个的值可以一起变动
  @Prop num:number = 0
  build() {
    Row(){
      Text(`子组件  ${this.num}`)

    }
  }
}


@Entry
@Component
struct Index {

//父组件的num1可以传给子组件的num
  @State num1:number = 100

  build() {
    Column() {
      Text(`父组件   ${this.num1}`)
      
      //点击时数量加1
        .onClick(()=>{
          this.num1 ++
        })
        
        
      mayButton({
      //因为子组件里面的变量num绑定了@Prop，所以会与父组件的变量num1一起改变
        num:this.num1
      })


    }.backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

说明：当子组件变量改变时，父组件不会改变。

2.利用函数来建立子组件与父组件的双向同步

举例：

@Component
struct mayButton {

  //@Prop将子组件变量修饰，可以与父组件进行同步
  @Prop num: number = 0


  //第一步：子组件给父组件传值，加入一个形参n：number类型
  //其中的()=> void是函数类型      () => {}是具体的函数表达方式
  AddNum: (n2: number) => void = () => {
  }

  build() {
    Row() {
      Text(`子组件  ${this.num}`)
    }
    .backgroundColor(Color.Green)
    .onClick(() => {

      //第二步：将具体的值传入函数里面，因为在上面已经加入了形参n
      this.AddNum(5) //调用上面定义的函数
    })
  }
}


@Entry
@Component
struct Index {
  @State num1: number = 100
  //第三步：在父组件接收到下面第四步中的父组件传过来的AddNum数值，然后在这里面定义相同的函数，其中()=>void是函数类型，跟number这种类似,
  //然后()=>{}是函数的具体表达方式，其中n为形参
  AddNum: (n:number) => void = (n1: number) => {
    this.num1 += n1
  }

  build() {
    Column() {
      Column({ space: 20 }) {
        Text(`父组件   ${this.num1}`)
          .onClick(() => {
            this.num1++
          })
          .backgroundColor(Color.Orange)
        mayButton({

          //第四步：将子组件里面的AddNum参数进行传过来给父组件的this.AddNum，其中的this.AddNum是上面定义的一个函数变量
          num: this.num1, AddNum: this.AddNum
        })
      }

    }
    .backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}