ArkUI ARKTS 鸿蒙开发 装饰器

@State 定义一个变量,可用于本页面的双向绑定

 官方解释

     @State装饰的变量,与声明式范式中的其他被装饰变量一样,是私有的,只能从组件内部访问,在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。

     @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。

     @State装饰的变量生命周期与其所属自定义组件的生命周期相同。

@Prop

 定义一个接收参数的变量,随着父组件变化而变化,子组件更改的值会被父组件覆盖(不会更改父组件的值)

    官方解释

      @Prop装饰的变量和父组件建立单向的同步关系:

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

      当数据源更改时,@Prop装饰的变量都会更新,并且会覆盖本地所有更改。因此,数值的同步是父组件到子组件(所属组件),子组件数值的变化不会同步到父组件。

 

@Link 

定义一个变量,不允许定义值,需要通过父组件传入,可以做到父子组件双向绑定

    官方解释

         @Link装饰的变量与其父组件中的数据源共享相同的值。

      限制条件

         @Link装饰器不能在@Entry装饰的自定义组件中使用。

 

@Watch装饰器:状态变量更改通知

 用于监听一个数据是否发生变化,如果发生变化,那么触发指定方法,@Watch需要和其他装饰符一起使用

       官方解释

       @Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===),

       遵循严格相等规范。当在严格相等为false的情况下,就会触发@Watch的回调。

 

示例代码

@Component
export struct TablePage {
  @State
  @Watch('updateFixation')//定义回调函数
    IsFixationTable:boolean = false; 
 //此处和state一起使用,所以必须写默认值

  @State FixationTableType:string = '';

//在值发生发变化后会触发这个回调函数
  updateFixation(){

   if( this.IsFixationTable){
     this.FixationTableType = "固定桌台模式"
   }else{
     this.FixationTableType = "自选桌台模式"
   }
  }
}

 

 

 

@Require装饰器:校验构造传参

    用于标记是否是必传参数

   官方解释

  当@Require装饰器和@Prop、@State、@Provide、@BuilderParam、

  普通变量(无状态装饰器修饰的变量)结合使用时,在构造该自定义组件时,@Prop、@State、@Provide、@BuilderParam和普通变量(无状态装饰器修饰的变量)必须在构造时传参。

 

限制条件

 

    @Require装饰器仅用于装饰struct内的@Prop、@State、@Provide、@BuilderParam和普通变量(无状态装饰器修饰的变量)

 

          比如 @Prop 不是必传参数,但是标记 @Require 之后这个参数就会必传

 

   

//子组件标记 @Require
@Component
export struct ProductItem {
  @Require
  @Prop Product: ProductDto;
  @BuilderParam productTag: () => void;
  @Consume("message") TextMsg: string;

  build() {
    Column() {

  }
}
如果不传,调用时报错

  

 

 

@Provide装饰器和@Consume装饰器

    简单的来说就是可以改名然后绑定,可以双向同步,但是不能多级双向同步

注意父页面的定义的变量是message 是通过 @Provide("TextMsg") 改名的,如果不需要改名也可以直接写成 

 父页面写    @Provide message: string = "好神奇啊,竟然改成自动绑定";

子页面写     @Consume message:string;

1.父页面

@Entry
@Component
struct Category {
  @Provide("TextMsg")
   message: string = "好神奇啊,竟然改成自动绑定";
build() { Column() { ProductItem(); } }
}

2.子页面

@Entry
@Component
struct Category {

  @Consume("message") TextMsg:string;

     build() {
       Column() { 

         Text(this.TextMsg)

      }
  }
}

 

@Track装饰器:class对象属性级更新

 官方解释

@Track应用于class对象的属性级更新。@Track装饰的属性变化时,只会触发该属性关联的UI更新。

限制条件

  • 不能在UI中使用非@Track装饰的属性,包括不能绑定在组件上、不能用于初始化子组件,错误的使用将导致JSCrash;可以在非UI中使用非@Track装饰的属性,如事件回调函数中、生命周期函数中等。

  • 建议开发者不要混用包含@Track的class对象和不包含@Track的class对象,如联合类型中、类继承中等。

 

posted @ 2024-08-20 17:26  亲爱的老王哥  阅读(60)  评论(0编辑  收藏  举报