1.@prop 不对数据渲染只是使用的时候用这个-【单向同步】
2.@Link 子组件需要对父组件做修改,系统父组件会告诉prop有link修改了数据更新,此时用这个。-【双向同步】
@prop和@Link
//任务类 class Task{ static id: number=1 //任务名称 name:string = `任务${Task.id++}` //任务状态:是否完成 finished:boolean=false } //统一的卡片样式 @Styles function card(){ .width('95%') .padding(20) .backgroundColor(Color.White) .borderRadius(15) .shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4}) } //任务统计信息 class StatInfo{ totalTask:number=0 finishTask:number=0 } //任务完成样式 @Extend(Text) function finishedTask(){ .decoration({type:TextDecorationType.LineThrough}) .fontColor('#B1B2B1') } @Entry @Component struct PropPage{ //统计信息 @State stat:StatInfo= new StatInfo() build(){ Column({space:10}){ //1.任务进度卡片 TaskStatistics({finishTask:this.stat.finishTask,totalTask:this.stat.totalTask}) //2.任务列表(双向同步不能用poro)$引用 否则会报错。但是我这里用this也没报错。奇怪 TaskList({stat:this.stat}) }.width('100%') .height('100%') .backgroundColor('#1F2F3') } } @Component struct TaskStatistics { @Prop finishTask:number @Prop totalTask:number build() { Row(){ Text('任务进度:') .fontSize(30) .fontWeight(FontWeight.Bold) Stack(){ Progress({ value:this.finishTask, total:this.totalTask, type:ProgressType.Ring }) Row(){ Text(this.finishTask.toString()) .fontSize(24) .fontColor('#36D') Text(' / ' + this.totalTask.toString()) .fontSize(24) } } } .card() .margin({top:20,bottom:10}) .justifyContent(FlexAlign.SpaceEvenly) } } @Component struct TaskList { //总任务数量 @Link stat:StatInfo //任务数组 @State tasks: Task[] = [] handleTaskChange(){ //1。更新任务数量 this.stat.totalTask=this.tasks.length //2.更新当前的状态 this.stat.finishTask = this.tasks.filter(item=> item.finished).length } build() { Column(){ Button('新建任务') .width(200) .onClick(()=>{ //1.新增任务数据 this.tasks.push(new Task()) //2。更新任务数量 this.handleTaskChange() }) //3.任务的列表 List({space:10}){ ForEach( this.tasks, (item:Task,index)=>{ ListItem(){ Row(){ Text(item.name) .fontSize(20) Checkbox() .select(item.finished) .onChange(val=>{ //1.更新当前的状态 item.finished = val //2.更新当前的状态 this.handleTaskChange() }) } .card() .justifyContent(FlexAlign.SpaceBetween) }.swipeAction({end:this.DeleteButton(index)})//滑动功能 }) } .width('100%') .layoutWeight(1) .alignListItem(ListItemAlign.Center) } } @Builder DeleteButton(index:number){ Button(){//删除按钮 Image($r('app.media.delete')) .fillColor(Color.White) .width(20) } .width(40) .height(40) .type(ButtonType.Circle) .backgroundColor(Color.Red) .margin(10) .onClick(()=>{ this.tasks.splice(index,1)//删除当前这条 this.handleTaskChange()//更新结果 }) } }
________________
//@Provide @Consume 系统自动传参不需要处理但是效率上没有 @prop @Link高
//测试代码 @Provide @Consume
//任务类 class Task{ static id: number=1 //任务名称 name:string = `任务${Task.id++}` //任务状态:是否完成 finished:boolean=false } //统一的卡片样式 @Styles function card(){ .width('95%') .padding(20) .backgroundColor(Color.White) .borderRadius(15) .shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4}) } //任务统计信息 class StatInfo{ totalTask:number=0 finishTask:number=0 } //任务完成样式 @Extend(Text) function finishedTask(){ .decoration({type:TextDecorationType.LineThrough}) .fontColor('#B1B2B1') } @Entry @Component struct PropPage{ //统计信息 // @State stat:StatInfo= new StatInfo() @Provide stat:StatInfo= new StatInfo() build(){ Column({space:10}){ //1.任务进度卡片 TaskStatistics() //2.任务列表 TaskList()//@Provide @Consume 系统自动传参不需要处理 }.width('100%') .height('100%') .backgroundColor('#1F2F3') } } @Component struct TaskStatistics { // @Prop finishTask:number // @Prop totalTask:number @Consume stat:StatInfo build() { Row(){ Text('任务进度:') .fontSize(30) .fontWeight(FontWeight.Bold) Stack(){ Progress({ value:this.stat.finishTask, total:this.stat.totalTask, type:ProgressType.Ring }) Row(){ Text(this.stat.finishTask.toString()) .fontSize(24) .fontColor('#36D') Text(' / ' + this.stat.totalTask.toString()) .fontSize(24) } } } .card() .margin({top:20,bottom:10}) .justifyContent(FlexAlign.SpaceEvenly) } } @Component struct TaskList { //总任务数量 // @Link stat:StatInfo @Consume stat:StatInfo //任务数组 @State tasks: Task[] = [] handleTaskChange(){ //1。更新任务数量 this.stat.totalTask=this.tasks.length //2.更新当前的状态 this.stat.finishTask = this.tasks.filter(item=> item.finished).length } build() { Column(){ Button('新建任务') .width(200) .onClick(()=>{ //1.新增任务数据 this.tasks.push(new Task()) //2。更新任务数量 this.handleTaskChange() }) //3.任务的列表 List({space:10}){ ForEach( this.tasks, (item:Task,index)=>{ ListItem(){ Row(){ Text(item.name) .fontSize(20) Checkbox() .select(item.finished) .onChange(val=>{ //1.更新当前的状态 item.finished = val //2.更新当前的状态 this.handleTaskChange() }) } .card() .justifyContent(FlexAlign.SpaceBetween) }.swipeAction({end:this.DeleteButton(index)})//滑动功能 }) } .width('100%') .layoutWeight(1) .alignListItem(ListItemAlign.Center) } } @Builder DeleteButton(index:number){ Button(){//删除按钮 Image($r('app.media.delete')) .fillColor(Color.White) .width(20) } .width(40) .height(40) .type(ButtonType.Circle) .backgroundColor(Color.Red) .margin(10) .onClick(()=>{ this.tasks.splice(index,1)//删除当前这条 this.handleTaskChange()//更新结果 }) } }