@Prop单向数据流：HarmonyOS6 PC父子组件传参的最佳实践-洪萨配资

在 HarmonyOS6 PC 开发中，组件拆分是日常操作。一个复杂的设置页面，你不可能把所有代码堆在一个build()方法里——拆成父子组件才是正路。那问题来了：父组件的数据怎么传给子组件？

@Prop 就是干这个的。说白了，它就是一个"只读通道"——父组件把数据丢给子组件，子组件拿着用，但不能改回去。简单、安全、单向流动。

@Prop 的核心规则：只能读，不能写

先看最基本的用法。父组件有一个计数器，子组件负责展示这个计数值：

@Componentstruct ChildCounter{@Propcount:number=0@Proplabel:string=''build(){Column(){Text(this.label).fontSize(12).fontColor('#999999')Text(this.count.toString()).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#007DFF')}.width(80).height(80).backgroundColor('#F8F9FA').borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}

子组件通过@Prop count: number声明"我需要一个叫 count 的数字"。父组件创建子组件时传值：

ChildCounter({count:this.parentCount,label:'原始值'})

这里有个铁律：子组件里不能对 @Prop 变量赋值。如果你写了this.count = 100，编译器会直接报错。这就是单向数据流的好处——数据只能从上往下流，子组件不会意外修改父组件的数据，排查 bug 的时候思路也清晰得多。

传递表达式：不只是传值，还能传计算结果

@Prop 传的不一定是原始值，你可以传一个表达式。这意味着父组件可以在传递的同时做计算，子组件拿到的是计算后的结果：

@Entry@Componentstruct PropDemo{@StateparentCount:number=0build(){Column(){Text('@Prop 父子传参').fontSize(18).fontWeight(FontWeight.Bold)// 父组件控制区Column(){Text(this.parentCount.toString()).fontSize(40).fontWeight(FontWeight.Bold).fontColor('#007DFF')Row({space:10}){Button('-1').onClick(()=>{this.parentCount--})Button('+1').onClick(()=>{this.parentCount++})Button('+10').onClick(()=>{this.parentCount+=10})Button('归零').onClick(()=>{this.parentCount=0})}.width('100%').justifyContent(FlexAlign.SpaceEvenly)}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(16)// 子组件展示区 —— 传递不同的表达式Column(){Row({space:12}){ChildCounter({count:this.parentCount,label:'原始值'})ChildCounter({count:this.parentCount*2,label:'×2'})ChildCounter({count:this.parentCount*3,label:'×3'})}.width('100%').justifyContent(FlexAlign.Center)}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(16).margin({top:10})}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)}}

三个子组件，同一个parentCount，但传的值分别是原始值、两倍、三倍。父组件的数字一变，三个子组件同步更新。这种模式在数据看板类的 PC 应用中特别常见。

@Prop 支持哪些类型？

和 @State 类似，@Prop 也支持基本类型、对象和数组。但有个重要区别——@Prop 在子组件里是值的深拷贝。

这意味着什么？父组件传一个对象给子组件，子组件拿到的是一个全新的拷贝。你在子组件里修改这个拷贝（假设能改的话），也不会影响父组件的原始对象。

不过实际上你改不了，因为 @Prop 变量在子组件中是只读的。

支持的类型清单：

number、string、boolean
枚举
对象和数组（深拷贝传递）

不支持的：

undefined、null
Promise
函数

在 PC 端开发中的典型场景

@Prop 在 PC 端的应用场景远比移动端丰富，因为 PC 端的界面更复杂，组件拆分更细。来看看几个实战案例。

场景一：数据面板卡片

PC 端的仪表盘页面通常有好几张统计卡片，每张卡片展示不同的指标。这种场景天然适合 @Prop——父组件持有所有数据，子卡片只负责展示：

@Componentstruct StatCard{@Proptitle:string=''@Propvalue:string=''@Propunit:string=''@Proptrend:string=''@Propcolor:string='#007DFF'build(){Column(){Text(this.title).fontSize(12).fontColor('#999999')Row(){Text(this.value).fontSize(28).fontWeight(FontWeight.Bold).fontColor(this.color)Text(this.unit).fontSize(12).fontColor('#999999').margin({left:4,bottom:4})}.margin({top:4})Text(this.trend).fontSize(11).fontColor(this.trend.startsWith('+')?'#6BCB77':'#FF6B6B').margin({top:2})}.width('23%').padding(16).backgroundColor('#FFFFFF').borderRadius(12).alignItems(HorizontalAlign.Start)}}@Entry@Componentstruct DashboardDemo{@StatetotalUsers:number=12580@StateactiveUsers:number=8932@Staterevenue:number=456000@StategrowthRate:number=12.5build(){Column(){Text('数据看板').fontSize(20).fontWeight(FontWeight.Bold).margin({bottom:16})Row({space:12}){StatCard({title:'总用户数',value:this.totalUsers.toString(),unit:'人',trend:'+5.2%',color:'#007DFF'})StatCard({title:'活跃用户',value:this.activeUsers.toString(),unit:'人',trend:'+8.1%',color:'#6BCB77'})StatCard({title:'营收',value:(this.revenue/10000).toFixed(1),unit:'万元',trend:'+12.5%',color:'#FFD93D'})StatCard({title:'增长率',value:this.growthRate.toFixed(1),unit:'%',trend:'-2.3%',color:'#FF6B6B'})}.width('100%').justifyContent(FlexAlign.SpaceBetween)// 模拟数据刷新Button('刷新数据').margin({top:16}).onClick(()=>{this.totalUsers+=Math.floor(Math.random()*100)this.activeUsers+=Math.floor(Math.random()*50)this.revenue+=Math.floor(Math.random()*10000)this.growthRate=parseFloat((Math.random()*20-5).toFixed(1))})}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(20)}}

四张卡片各自独立，但数据来源全在父组件。点一下"刷新数据"，所有卡片同步更新。代码结构清晰，每张卡片的 UI 逻辑都封装在StatCard里。

场景二：导航标签栏

PC 端应用的侧边导航或顶部标签栏也是 @Prop 的好舞台。当前选中的标签由父组件管理，子组件只负责展示和接收状态：

@Componentstruct NavTab{@Propicon:string=''@Proplabel:string=''@PropisActive:boolean=false@PropbadgeCount:number=0build(){Row(){Text(this.icon).fontSize(18)Text(this.label).fontSize(13).margin({left:8}).fontColor(this.isActive?'#007DFF':'#333333')if(this.badgeCount>0){Text(this.badgeCount.toString()).fontSize(10).fontColor('#FFFFFF').backgroundColor('#FF6B6B').borderRadius(8).padding({left:5,right:5,top:1,bottom:1}).margin({left:8})}Blank()if(this.isActive){Column().width(3).height(20).backgroundColor('#007DFF').borderRadius(2)}}.width('100%').padding({left:16,right:12,top:10,bottom:10}).backgroundColor(this.isActive?'#E8F0FE':'#FFFFFF').borderRadius(8)}}@Entry@Componentstruct NavigationDemo{@StateactiveTab:number=0build(){Row(){// 侧边导航Column({space:4}){NavTab({icon:'📊',label:'数据看板',isActive:this.activeTab===0})NavTab({icon:'👥',label:'用户管理',isActive:this.activeTab===1,badgeCount:3})NavTab({icon:'📦',label:'订单列表',isActive:this.activeTab===2,badgeCount:12})NavTab({icon:'⚙️',label:'系统设置',isActive:this.activeTab===3})}.width(200).padding(8).backgroundColor('#FFFFFF')// 内容区Column(){Text(`当前页面:${['数据看板','用户管理','订单列表','系统设置'][this.activeTab]}`).fontSize(18).fontWeight(FontWeight.Bold)Row({space:8}){Button('数据看板').onClick(()=>{this.activeTab=0})Button('用户管理').onClick(()=>{this.activeTab=1})Button('订单列表').onClick(()=>{this.activeTab=2})Button('系统设置').onClick(()=>{this.activeTab=3})}.margin({top:16})}.layoutWeight(1).padding(20).backgroundColor('#F5F6FA')}.width('100%').height('100%')}}

侧边导航的激活状态完全由父组件的activeTab控制，每个 NavTab 只是被动接收状态来渲染。这种"状态提升"的模式在 PC 端布局中很经典。

场景三：进度指示器

PC 端的任务管理或文件上传场景经常需要进度展示。用 @Prop 做一个通用的进度卡片组件：

@Componentstruct ProgressCard{@ProptaskName:string=''@Propprogress:number=0@ProptotalSize:string=''build(){Column(){Row(){Text(this.taskName).fontSize(14).layoutWeight(1)Text(`${this.progress}%`).fontSize(13).fontColor('#007DFF')}.width('100%')Stack({alignContent:Alignment.Start}){Column().width('100%').height(6).backgroundColor('#E0E0E0').borderRadius(3)Column().width(`${this.progress}%`).height(6).backgroundColor(this.progress>=100?'#6BCB77':'#007DFF').borderRadius(3)}.width('100%').margin({top:8})Text(`总大小:${this.totalSize}`).fontSize(11).fontColor('#999999').margin({top:4})}.width('100%').padding(14).backgroundColor('#FFFFFF').borderRadius(10)}}