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()
}
5.eventHub通知
引入
import common from '@ohos.app.ability.common'
定义 private context = getContext(this) as common.UIAbilityContext
发送
this.context.eventHub.emit('todayclick',1)
监听
this.context.eventHub.on('todayclick', (data: number) => { //方法 this.gettodaycal() });