HarmonyOS 鸿蒙Next 简单说明白:装饰器@State、@Prop、@Link、@Provide、@Consume修饰变量,@Watch监听变量状态发生变化
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
简单,通俗,易懂
更多关于HarmonyOS 鸿蒙Next 简单说明白:装饰器@State、@Prop、@Link、@Provide、@Consume修饰变量,@Watch监听变量状态发生变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
希望对你有帮助,
在HarmonyOS鸿蒙Next中,装饰器用于修饰变量,以实现不同的数据绑定和状态管理功能。以下是这些装饰器的简要说明:
-
@State:用于声明一个组件的内部状态。当使用
[@State](/user/State)
修饰的变量发生变化时,组件会自动重新渲染。[@State](/user/State)
通常用于管理组件的私有状态。 -
@Prop:用于声明一个从父组件传递过来的属性。
[@Prop](/user/Prop)
修饰的变量是单向绑定的,即父组件的属性变化会传递给子组件,但子组件不能直接修改该属性。 -
@Link:用于声明一个与父组件双向绑定的属性。
[@Link](/user/Link)
修饰的变量允许子组件和父组件之间进行双向数据同步,即子组件可以修改该属性,并且父组件的属性也会随之更新。 -
@Provide和@Consume:用于实现跨组件层级的数据共享。
[@Provide](/user/Provide)
用于在父组件中提供数据,[@Consume](/user/Consume)
用于在子组件中消费这些数据。当[@Provide](/user/Provide)
修饰的变量发生变化时,所有使用[@Consume](/user/Consume)
修饰的变量都会自动更新。 -
@Watch:用于监听变量的状态变化。当使用
[@Watch](/user/Watch)
修饰的变量发生变化时,会触发指定的回调函数,开发者可以在回调函数中执行相应的逻辑。
这些装饰器在鸿蒙Next中提供了灵活的数据管理和状态更新机制,帮助开发者更高效地构建响应式UI。