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

HarmonyOS_001

于 2024-07-10 14:47:19 发布

阅读量425

点赞数 22

分类专栏：前端鸿蒙安卓文章标签： harmonyos android 华为鸿蒙前端

本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/140323607

版权

鸿蒙同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

安卓

23 篇文章 0 订阅

订阅专栏

前言

之前的文章中，我们介绍了状态管理的概念和最基础的装饰器：@State。本篇文章讲解一下可以和父组件建立单向同步的状态管理装饰器：@Prop。

基本使用

@Prop 用于父组件向子组件的单向状态管理。假设我们有一个子组件用来展示用户信息，其所展示的用户信息是由父组件传递进来的。而且用户信息要随着父组件的更新而更新。示例代码如下：

@Entry
@Component
struct Index {
  @State userName: string = "rose";

  build() {
    Column() {
      Button("修改用户名")
        .onClick(() => { // 此处模拟用户名修改
          this.userName = "jack";
        })
      UserInfo({ userName: this.userName })
    }
  }
}

@Component
struct UserInfo {
  @Prop userName: string = "";

  build() {
    Text(this.userName)
  }
}

父组件 Index 将 userName 传递给子组件 UserInfo 进行展示。当点击了《修改用户名》的按钮之后，父组件的 userName 更新为 “jack”，此时子组件的用户名展示也会更新为 “jack”。
示例图如下：
在这里插入图片描述

Tips:如果将子组件中的 userName 用 @State 装饰器修饰，点击了父组件中的按钮，子组件中的显示不会随之刷新。感兴趣的同学可以自己写代码验证一下。

具体规则

不强制本地初始化

对于 @Prop 装饰器修饰的变量，可以本地初始化，也可以从父组件进行初始化。需要注意的是两者至少有一项。比如下面这三种情况都是可以的：

●只在本地进行初始化，代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      UserInfo()
    }
  }
}

@Component
struct UserInfo {
  @Prop userName: string = "";

  build() {
    Text(this.userName)
  }
}

●只在父组件进行初始化，代码如下：

@Entry
@Component
struct Index {
  @State userName: string = "rose";

  build() {
    Column() {
      UserInfo({ userName: this.userName })
    }
  }
}

@Component
struct UserInfo {
  @Prop userName: string;

  build() {
    Text(this.userName)
  }
}

●即在本地进行初始化，也在父组件进行初始化（父组件的会覆盖掉本地的），代码如下：

@Entry
@Component
struct Index {
  @State userName: string = "rose";

  build() {
    Column() {
      UserInfo({ userName: this.userName })
    }
  }
}

@Component
struct UserInfo {
  @Prop userName: string = "sam";

  build() {
    Text(this.userName)
  }
}

虽然有以上三种情况，但结合 @Prop 装饰器的实际使用场景（父组件到子组件的数据单向同步），无论如何我们都是应该从父组件对其初始化的，不然我们在子组件中用 @Prop 装饰器就没有什么实际的意义了。

Tips：需要注意的是，如果你既没有在本地初始化也没有在父组件中初始化，实际上编译器也不会报错。如果就不好排查了…

必须指定类型，且类型需与同步的类型一致

首先第一条，@Prop 装饰器修饰的变量必须显式的指定类型，不能借助类型推断：

@Prop userName = "sam";

上面的代码编译器会报以下的错误：The ‘userName’ attribute must have its type specified. 。
其次就是 @Prop 的类型必须与父组件传入的类型一致。比如下面的代码就是不允许的：

@Entry
@Component
struct Index {
  @State userName: number = 0

  build() {
    Column() {
      Button("修改用户名")
        .onClick(() => {
          this.userName = "jack";
        })
      UserInfo({ userName: this.userName })
    }
  }
}

@Component
struct UserInfo {
  @Prop userName: string = "sam";

  build() {
    Text(this.userName)
  }
}

编译器会提示报以下的错误：Type ‘number’ is not assignable to type ‘string’. 。

如果传入的是数组或者类，数组的元素类型或者类的类型也要对应一致。

允许装饰的变量类型

支持的类型如下：

●基础类型：string、number、boolean、enum及相关类型的数组。
●对象类型：Object、class、Date 及相关类型的数据。
●集合类型：Map、Set（API 11 以上才支持）。
●联合类型：支持上述类型的联合类型，比如：string | number。

总结

@Porp 装饰器用于父组件与子组件的单向数据同步。它可以本地初始化也可以父组件初始化，且父组件传入的类型要与 @Porp 装饰器修饰的字段类型一致。

写在最后

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

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