【鸿蒙实战开发】HarmonyOS状态管理@Event

Harmony状态管理@Event

背景

在上一节中，我们针对父子组件，讲了关于传递数据的知识。我们了解到

1.@Local 是管理自己内部的数据的，
2.@Param 是负责接收父组件的数据的，而且子自己内部不能直接修改

按照一个组件最基本的功能，既能接收外部传入的数据，也要向外部传递数据。那么 @Event 修饰符就是来解决这个问题的了。

介绍

@Event 是 子组件向父组件传递数据的技术，它只能用在 @ComponentV2 修改的组件上，其中的思想是

1.完成修改数据的操作，还是放在父组件内部，通过定义一个函数 func 来实现
2.在父组件调用子组件的时候，也顺带把这个函数 func 传递给子组件
3.子组件在内部 使用 @Event 来修饰 该函数，并且在需要的使用直接调用即可

父组件

1.定义内部数据 num
2.定义修改内部数据num的函数 func
3.使用子组件时，把num和func都传递过去

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100
  // 自己定义的函数 负责修改数据， 该函数也要传递给子组件 
  func = (unit: number) => {
    this.num -= unit
  }

  build() {
    Column() {
      Button("父组件 修改" + this.num)
        .onClick(() => {
          this.num++
        })
      // 使用子组件，并且传递数据 和 传递函数 
      Son({ num: this.num, func: this.func })
        .padding(10)
    }
    .width("100%")

  }
}

子组件

1.使用 @Param 接收父组件传递的 num
2.使用@Event 接收父组件传递的函数 func
3.定义点击事件的处理函数 onfunc，内部直接调用父组件传递过来的函数

@ComponentV2
struct Son {
  @Param num: number = 0
  @Event func: (num: number) => void = () => {
  }
  onfunc = () => {
    this.func(5)
  }

  build() {

    Column() {
      Button(`子组件 ${this.num}`)

      Button("子组件修改父组件中的状态")
        .onClick(this.onfunc)
    }
    .border({
      width: 1,
      style: BorderStyle.Dashed
    })
  }
}

流程

@Once

@Once 和 @Param作用类似，都可以表示接收父组件传递过来的数据，但是也存在区别

1.@Once 只会接收第一次父组件传递过来的数据，后续父组件的数据修改，不会同步到 @Once修改的变量上
2.@Once 需要和 @Param 一起搭配使用，因为 @Param 修饰的是父组件传递给子组件的变量，该变量不能直接被修改。所以@Once修饰的变量，也不能在子组件内部直接修改。

@ComponentV2
struct Son {
  @Once @Param num: number = 0

  build() {
    Column() {
      Button(`子组件 ${this.num}`)
        .onClick(() => {
          this.num++ // 修改无效 
        })
    }
    .border({
      width: 1,
      style: BorderStyle.Dashed
    })
  }
}

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100

  build() {
    Column() {

      Son({ num: this.num })
        .padding(10)
    }
    .width("100%")

  }
}

总结

1.@Param 表示父组件传递给子组件的数据，当父组件修改了，子组件会跟随响应，同时子组件内部不能直接修改 @Param修饰的变量
2.@Event 表示子组件想要修改父组件数据的一种技术，它用来修改函数，该函数是由父组件定义和传递给子组件的
3.@Once 必须和 @Param 搭配使用，表示父组件传递过来的数据，只会第一次生效。

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档