鸿蒙开发 组件之间的传值
鸿蒙开发组件中传值
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()
});
更多推荐

所有评论(0)