1.@Prop:父組件傳遞給子組件,單向傳遞,子組件改變值,父組件UI不更新。
? 引入子組件 ?并賦值,子組件用@Prop 接收
? import headerView from '../../common/bean/BaseNavHeaderView' ??
headerView({titlestr:'添加地址',isback:true,isleftimage:'',isright:true,rightcontentstr:'保存',rightimage:'',fromehere:'添加地址',startCalcute:this.startCalcuteMoney.bind(this) }).width('100%').height('44').backgroundColor('#FFD615').zIndex(888)
@Component export default struct BaseNavHeaderView {@Prop titlestr:string;isback:Boolean;isleftimage:string;isright:Boolean;rightcontentstr:string;rightimage:string;fromehere:string;startCalcute:() => void = () =>{}
2.@Link 雙向傳遞,子組件改變父組件UI更新,注意:不能修飾帶@Entry 類型的pages.
? ?父試圖定義變量,傳遞給子組件child時要用$
@State dianjicounts:number = 0
?child({dianjicounts:$dianjicounts})
子組件接收
?@Component export default struct child {
? ? ? @Link dianjicounts:number
? ? 調用用this.dianjicounts
}
3.@Provide/@Consume 不需要傳遞參數,UI會更新
?父組件定義并調用子組件
@Provide dianjicounts: number = 0?
child()
子組件接收
@Component export default struct child {
? ? ?@Consume dianjicounts:number
? ? ?調用用this.dianjicounts
}
4.方法傳遞
? 父組件定義方法
startCalcuteMoney():void{
? ? ?console.log('保存一下')
}
傳給子組件,要用bind方法綁定一下
headerView({
? ?startCalcute:this.startCalcuteMoney.bind(this)
})?
子組件接收
@Component export default struct BaseNavHeaderView {
? ? ? ? @Prop startCalcute:() => void = () =>{}
子組件調用
? ? this.startCalcute()
}