HarmonyOS 鸿蒙Next 简单说明白:装饰器@State、@Prop、@Link、@Provide、@Consume修饰变量,@Watch监听变量状态发生变化

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 简单说明白:装饰器@State@Prop@Link@Provide@Consume修饰变量,@Watch监听变量状态发生变化 首先要明白什么是“状态变量”?即被状态装饰器(@State@Prop@Link@Provide@Consume)修饰的变量,比如 [@State](/user/State) str : string=''; str 就是状态变量。状态变量值的改变会引起UI界面重新渲染。

[@State](/user/State)

[@State](/user/State)装饰的变量,是私有的,只能被组件内部访问,在声明时必须指定其类型和本地初始化。

[@Prop](/user/Prop)

父组件与子组件单向同步,[@Prop](/user/Prop)装饰的变量变化后不会同步影响其父组件。

[@Link](/user/Link)

父、子组件双向同步,子组件中被[@Link](/user/Link)装饰的变量与其父组件中对应的数据源建立双向数据绑定。

[@Provide](/user/Provide)[@Consume](/user/Consume)

应用于与后代组件的双向数据同步,适用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间的状态传递,[@Provide](/user/Provide)[@Consume](/user/Consume)实现跨层级传递,不受限父、子之间,还可以父、孙之间传递(跨过子组件)。

可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同。比如,

[@Provide](/user/Provide) num : number=0;
[@Consume](/user/Consume) num : number;

[@Provide](/user/Provide)('num') num1 : number=1;
[@Consume](/user/Consume)('num') num2 : number;

[@Watch](/user/Watch)

应用于对状态变量的监听。如果需要关注某个状态变量的值是否改变,可以使用[@Watch](/user/Watch)为状态变量设置回调函数。当状态变量变化时,所设置的回调函数将被调用。

注意:不要在回调函数里修改[@Watch](/user/Watch)装饰的状态变量,否则陷入死循环。

[@Watch](/user/Watch)('changeHandler')
[@State](/user/State)/Prop/Link/Provide num : number=0;

[@State](/user/State) str : string = '';
changeHandler(){
  str ='num的值发生了变化';
}

更多关于HarmonyOS 鸿蒙Next 简单说明白:装饰器@State、@Prop、@Link、@Provide、@Consume修饰变量,@Watch监听变量状态发生变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

简单,通俗,易懂

更多关于HarmonyOS 鸿蒙Next 简单说明白:装饰器@State、@Prop、@Link、@Provide、@Consume修饰变量,@Watch监听变量状态发生变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


希望对你有帮助,

在HarmonyOS鸿蒙Next中,装饰器用于修饰变量,以实现不同的数据绑定和状态管理功能。以下是这些装饰器的简要说明:

  1. @State:用于声明一个组件的内部状态。当使用[@State](/user/State)修饰的变量发生变化时,组件会自动重新渲染。[@State](/user/State)通常用于管理组件的私有状态。

  2. @Prop:用于声明一个从父组件传递过来的属性。[@Prop](/user/Prop)修饰的变量是单向绑定的,即父组件的属性变化会传递给子组件,但子组件不能直接修改该属性。

  3. @Link:用于声明一个与父组件双向绑定的属性。[@Link](/user/Link)修饰的变量允许子组件和父组件之间进行双向数据同步,即子组件可以修改该属性,并且父组件的属性也会随之更新。

  4. @Provide@Consume:用于实现跨组件层级的数据共享。[@Provide](/user/Provide)用于在父组件中提供数据,[@Consume](/user/Consume)用于在子组件中消费这些数据。当[@Provide](/user/Provide)修饰的变量发生变化时,所有使用[@Consume](/user/Consume)修饰的变量都会自动更新。

  5. @Watch:用于监听变量的状态变化。当使用[@Watch](/user/Watch)修饰的变量发生变化时,会触发指定的回调函数,开发者可以在回调函数中执行相应的逻辑。

这些装饰器在鸿蒙Next中提供了灵活的数据管理和状态更新机制,帮助开发者更高效地构建响应式UI。

在HarmonyOS鸿蒙Next中,装饰器用于管理组件状态和数据流:

  1. @State:声明组件的内部状态,状态变化时自动触发UI更新。
  2. @Prop:用于父组件向子组件传递数据,子组件不能直接修改,需通过父组件更新。
  3. @Link:建立父子组件间的双向绑定,子组件可直接修改父组件的数据。
  4. @Provide:在父组件中提供数据,供后代组件使用。
  5. @Consume:在后代组件中消费父组件提供的数据。
  6. @Watch:监听指定变量的变化,变化时执行回调函数。

这些装饰器简化了状态管理和组件间通信。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!