首先要明白什么是“狀態變量”?即被狀態裝飾器(@State、@Prop、@Link、@Provide、@Consume)修飾的變量,比如 @State str : string=''; ?str就是狀態變量。狀態變量值的改變會引起UI界面重新渲染。
@State
@State裝飾的變量,是私有的,只能被組件內部訪問,在聲明時必須指定其類型和本地初始化。
@Prop
父組件與子組件單向同步,@Prop裝飾的變量變化后不會同步影響其父組件。
@Link
父、子組件雙向同步,子組件中被@Link裝飾的變量與其父組件中對應的數據源建立雙向數據綁定。
@Provide和@Consume
應用于與后代組件的雙向數據同步,適用于狀態數據在多個層級之間傳遞的場景。不同于上文提到的父子組件之間的狀態傳遞,@Provide和@Consume實現跨層級傳遞,不受限父、子之間,還可以父、孫之間傳遞(跨過子組件)。
可以通過相同的變量名或者相同的變量別名綁定,變量類型必須相同。比如,@Provide num : number=0; @Consume num : number; 或 @Provide('num') num1 : number=1; @Consume('num') num2 : number;
@Watch?
應用于對狀態變量的監聽。如果需要關注某個狀態變量的值是否改變,可以使用@Watch為狀態變量設置回調函數。當狀態變量變化時,所設置的回調函數將被調用。
注意:不要在回調函數里修改@Watch裝飾的狀態變量,否則陷入死循環。
@Watch('changeHandler') @State/Prop/Link/Provide num : number=0;
@State str : string ='';
changeHandler(){
? ? str ='num的值發生了變化';
}