ArkTS 进阶之道21Provide/Consume 跨层级传递边界——祖辈 Provide 后辈 Consume 不用逐层 props 透传本文是「ArkTS 进阶之道」系列第 21 篇续「ArkUI 状态联动」深水区。上篇讲 Link 跨组件双向同步边界Link $ 语法双向绑定父子都同步。本文讲跨层级传递边界Provide 祖辈定义Consume 后辈消费——根因在跨层级传递槽不用逐层 props 透传Provide 祖辈定义跨层级状态Consume 后辈消费祖辈 Provide 的状态中间层不用 props 透传。能力系列篇 21 讲过 Provide/Consume 怎么用本文讲为哈 Provide/Consume 跨层级传递合法逐层 props 透传冗余——根因在跨层级传递槽。一、开篇Provide/Consume 不是逐层 props 透传是跨层级传递槽的祖辈后辈同步你写 React 时跨层级状态传递是「Context 魔法」祖辈 createContext 后辈 useContext// React 跨层级状态传递Context useContextconstThemeContextcreateContext(#007DFF)// 祖辈 createContextfunctionGrandParent(){returnThemeContext.Provider value#007DFFMiddleLayer//ThemeContext.Provider}functionMiddleLayer(){returnGrandChild/// 中间层不用 props 透传}functionGrandChild(){constthemeuseContext(ThemeContext)// 后辈 useContext 消费祖辈 ContextreturnText color{theme}孙子看到 theme/Text}// React 跨层级传递Context useContext跨层级传递槽魔法你写鸿蒙 ArkTS 时Provide/Consume跨层级传递槽——祖辈 Provide 定义后辈 Consume 消费// ArkTS Provide/Consume 跨层级传递槽Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide 祖辈定义跨层级状态build(){Column(){MiddleLayer()// 中间层不用 props 透传}}}Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume 后辈消费祖辈 Provide 的状态build(){Text(孙子看到 theme${this.themeColor}).fontColor(this.themeColor)}}// Provide/Consume 跨层级传递槽祖辈定义后辈消费中间层不用 props 透传Context 魔法 vs 跨层级传递槽的区别React 把跨层级传递当 Context 魔法祖辈 createContext 后辈 useContextArkTS 把 Provide/Consume 当「跨层级传递槽荬饰器」祖辈 Provide 定义后辈 Consume 消费。根因不是 Context 魔法是跨层级传递槽——Provide 祖辈定义跨层级状态Consume 后辈消费祖辈 Provide 的状态中间层不用 props 透传。二、根因Provide/Consume 的跨层级传递槽机制鸿蒙 ArkUI 的 Provide/Consume 是跨层级传递槽绑定——编译期把 Provide 绑成跨层级传递槽Consume 后辈消费祖辈 Provide 的状态来自三重绑定机制。机制 1Provide 祖辈定义跨层级传递槽——不是逐层 props 透传Provide 荬饰器编译期绑跨层级传递槽——把 Provide 绑成跨层级传递槽后辈 Consume 直接消费不用逐层 props 透传Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide 祖辈定义跨层级传递槽build(){Column(){MiddleLayer()// 中间层不用 props 透传 themeColor}}}// 编译期Provide(themeColor) 绑成跨层级传递槽祖辈 GrandParent → 后辈 GrandChild// 运行时后辈 Consume(themeColor) 直接消费祖辈 Provide 的 themeColor不用逐层 props 透传编译期绑跨层级传递槽ProvidethemeColor荬饰器编译期把themeColor绑成跨层级传递槽——祖辈GrandParent→ 后辈GrandChild跨层级传递。后辈Consume(themeColor)直接消费祖辈Provide的themeColor不用逐层 props 透传。根因不是逐层 props 透传是跨层级传递槽。机制 2Consume 后辈消费祖辈 Provide 的状态——跨层级同步Consume 荬饰器后辈消费祖辈 Provide 的状态——跨层级同步祖辈改后辈同步后辈改祖辈同步双向Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume 后辈消费祖辈 Provide 的状态build(){Column(){Text(孙子看到 theme${this.themeColor}).fontColor(this.themeColor)// ✅ 孙子用祖父 Provide 的状态渲染跨层级同步Button(孙子改 themeColor绿色).onClick((){this.themeColor#52C41A})// ✅ Consume 后辈改 → 祖父 Provide 同步}}}// Consume 后辈消费跨层级同步双向// 祖辈改 themeColor → 后辈 Consume 同步 后辈改 themeColor → 祖辈 Provide 同步双向Consume 后辈消费跨层级同步双向ConsumethemeColor荬饰器后辈消费祖辈 Provide 的themeColor——跨层级同步双向。祖辈改themeColor→ 后辈Consume同步后辈改themeColor→ 祖辈Provide同步双向。根因不是单向传递是跨层级同步双向。机制 3Provide/Consume vs 逐层 props 透传边界——跨层级传递槽 vs 逐层透传Provide/Consume跨层级传递槽祖辈定义后辈消费不用逐层透传逐层 props 透传逐层冗余每层 props 透传——根因都是跨层级传递但绑的机制不同// ✅ Provide/Consume 路径跨层级传递槽不用逐层 props 透传Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide 祖辈定义跨层级传递槽build(){Column(){MiddleLayer()}}// ✅ 中间层不用 props 透传 themeColor}Componentstruct MiddleLayer{build(){Column(){GrandChild()}}// ✅ 中间层不用 props 透传 themeColor}Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume 后辈消费祖辈 Provide 的状态build(){Text(孙子看到 theme${this.themeColor}).fontColor(this.themeColor)}}// ✅ Provide/Consume 跨层级传递槽祖辈定义后辈消费中间层不用 props 透传推荐// ⚠ 逐层 props 透传路径每层 props 透传冗余不推荐Componentstruct GrandParent2{StatethemeColor:string#007DFFbuild(){Column(){MiddleLayer2({themeColor:this.themeColor})}}// ⚠ 逐层 props 透传}Componentstruct MiddleLayer2{PropthemeColor:string// ⚠ 逐层 props 透传build(){Column(){GrandChild2({themeColor:this.themeColor})}}// ⚠ 逐层 props 透传}Componentstruct GrandChild2{PropthemeColor:string// ⚠ 逐层 props 透传build(){Text(孙子看到 theme${this.themeColor}).fontColor(this.themeColor)}}// ⚠ 逐层 props 透传每层 props 透传冗余不推荐Provide/Consume vs 逐层 props 透传边界Provide/Consume 路径——跨层级传递槽祖辈定义后辈消费不用逐层透传推荐。逐层 props 透传路径——每层 props 透传冗余不推荐。根因都是跨层级传递但绑的机制不同——Provide/Consume 跨层级传递槽不用逐层透传逐层 props 透传每层冗余。机制 4Provide/Consume 必须同名 key——跨层级传递槽 key 匹配Provide/Consume必须同名 key——跨层级传递槽 key 匹配Provide(‘key’) 和 Consume(‘key’) 同名 key 才能跨层级传递Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide keythemeColorbuild(){Column(){GrandChild()}}}Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume keythemeColor同名 key 匹配build(){Text(孙子看到 theme${this.themeColor})}}// Provide/Consume 必须同名 keyProvide(themeColor) ↔ Consume(themeColor) 同名 key 匹配// 跨层级传递槽 key 匹配同名 key 才能跨层级传递不同名 key 传递失败Provide/Consume 必须同名 keyProvidethemeColor和 ConsumethemeColor同名 key 匹配才能跨层级传递。根因不是任意 key 是同名 key 匹配——跨层级传递槽 key 匹配同名 key 才能跨层级传递。三、真机配图Provide/Consume 跨层级传递边界——祖辈定义后辈消费初始态祖父 themeColor“#007DFF”、孙子 themeColor“#007DFF” 同步、孙子文字蓝色渲染均跨层级传递初始态齐点调两按钮后祖父改红色→孙子文字变红同步、孙子改绿色→祖父变绿同步均跨层级双向传递证据齐对比证据点祖父改红色按钮后孙子文字变红同步祖辈改后辈同步点孙子改绿色按钮后祖父变绿同步后辈改祖辈同步。Provide/Consume 跨层级传递槽双向同步——祖辈 Provide 定义跨层级状态后辈 Consume 消费祖辈 Provide 的状态祖辈改后辈同步后辈改祖辈同步双向中间层不用逐层 props 透传。四、真解法Provide/Consume 跨层级传递的三个场景场景 1Provide/Consume 主题色跨层级传递90% 场景首选跨层级传递槽Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide 祖辈定义主题色build(){Column(){MiddleLayer()}}}Componentstruct MiddleLayer{build(){Column(){GrandChild()}}// ✅ 中间层不用 props 透传 themeColor}Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume 后辈消费祖辈 Provide 的主题色build(){Text(孙子看到 theme${this.themeColor}).fontColor(this.themeColor)}}为哈能跑Provide/Consume 主题色跨层级传递——跨层级传递槽祖辈 Provide 定义主题色后辈 Consume 消费祖辈 Provide 的主题色中间层不用逐层 props 透传。首选这个90% 的场景跨层级状态传递用 Provide/Consume 跨层级传递槽就够。要写「跨层级状态传递主题色等」时用这个——不用逐层 props 透传冗余Provide/Consume 跨层级传递槽不用逐层透传。场景 2Provide/Consume 用户信息跨层级传递跨层级传递槽后辈消费祖辈状态interfaceUser{name:string;age:number}Componentstruct GrandParent{Stateuser:User{name:张三,age:25}Provide(userInfo)userInfo:Userthis.user// ✅ Provide 祖辈定义用户信息build(){Column(){MiddleLayer()}}}Componentstruct GrandChild{Consume(userInfo)userInfo:User// ✅ Consume 后辈消费祖辈 Provide 的用户信息build(){Column(){Text(孙子看到 name${this.userInfo.name})Text(孙子看到 age${this.userInfo.age})}}}// Provide/Consume 用户信息跨层级传递祖辈 Provide 定义用户信息后辈 Consume 消费// 中间层不用逐层 props 透传 userInfo跨层级传递槽不用逐层透传为哈能跑Provide/Consume 用户信息跨层级传递——跨层级传递槽祖辈 Provide 定义用户信息后辈 Consume 消费祖辈 Provide 的用户信息中间层不用逐层 props 透传。要写「跨层级对象状态传递用户信息等」时用这个——不用逐层 props 透传冗余Provide/Consume 跨层级传递槽不用逐层透传。场景 3Provide/Consume 多祖辈多后辈跨层级传递多跨层级传递槽各 key 各绑各槽Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide keythemeColor 跨层级传递槽1Provide(fontSize)fontSize:number16// ✅ Provide keyfontSize 跨层级传递槽2build(){Column(){GrandChild()}}}Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume keythemeColor 消费跨层级传递槽1Consume(fontSize)fontSize:number// ✅ Consume keyfontSize 消费跨层级传递槽2build(){Text(孙子看到 theme${this.themeColor} size${this.fontSize}).fontColor(this.themeColor).fontSize(this.fontSize)}}// Provide/Consume 多祖辈多后辈跨层级传递各 key 各绑各跨层级传递槽// themeColor 跨层级传递槽1 fontSize 跨层级传递槽2各 key 各绑各槽为哈能跑Provide/Consume 多祖辈多后辈跨层级传递——各 key 各绑各跨层级传递槽themeColor 跨层级传递槽1fontSize 跨层级传递槽2后辈 Consume 各 key 消费各槽。要写「多跨层级状态传递主题色字号等」时用这个——不用逐层 props 透传冗余Provide/Consume 多跨层级传递槽各 key 各绑各槽。五、一句话哲学Provide/Consume 不是逐层 props 透传是跨层级传递槽的祖辈后辈同步。ArkUI 的 Provide 荬饰器编译期绑跨层级传递槽Consume 后辈消费祖辈 Provide 的状态。根因不是逐层 props 透传是跨层级传递槽——Provide 祖辈定义跨层级传递槽不用逐层 props 透传 Consume 后辈消费祖辈 Provide 的状态跨层级同步双向 Provide/Consume vs 逐层 props 透传边界跨层级传递槽 vs 逐层透传冗余 Provide/Consume 必须同名 key跨层级传递槽 key 匹配。对比 React 跨层级传递 Context 魔法祖辈 createContext 后辈 useContextArkTS Provide/Consume 跨层级传递槽祖辈后辈同步。状态联动深水区串讲Watch 绑 State 变触发副作用回调槽篇 68onClick 改 State 不直接调副作用单向数据流 Link $ 语法双向绑定跨组件同步篇 69父改子同步子改父同步双向 Provide/Consume 跨层级传递槽祖辈后辈同步篇 70祖辈定义后辈消费不用逐层 props 透传——续「ArkUI 状态联动」深水区讲状态联动深水区Watch 副作用回调槽边界 Link $ 语法双向绑定边界 Provide/Consume 跨层级传递槽边界。系列预告下篇篇 71讲 Observed/ObjectLink 嵌套对象观测边界嵌套对象响应式根因续「ArkUI 状态联动」深水区。五阶段哲学体系类型哲学50-52→ 作用域哲学53-55→ 状态哲学56-59→ 渎染哲学60-62→ 组件设计63-67→ 状态联动深水区68讲清 ArkTS/ArkUI 进阶哲学。能力系列回链能力系列篇本文进阶点篇 21 Provide/Consume 用法Provide/Consume 跨层级传递槽边界根因祖辈定义后辈消费不用逐层 props 透传篇 13 State 基础用法状态哲学State 赋值就刷 UI 依赖追踪篇 59 Watch 用法状态联动深水区Watch 副作用回调槽 vs onClick 直接调副作用边界真机 demo 完整代码// 篇 70 demoProvide/Consume 跨层级传递边界// 祖辈 Provide 后辈 Consume 跨层级传递不用逐层 props 透传// ✅ 祖父组件Provide 定义跨层级状态Componentstruct GrandParent{Provide(themeColor)themeColor:string#007DFF// ✅ Provide 祖辈定义跨层级状态Statelog:string(未操作)build(){Column({space:8}){Text(祖父组件 GrandParentProvide 定义跨层级状态).fontSize(13).fontColor(#2563eb).fontWeight(FontWeight.Bold)Text(themeColor ${this.themeColor}).fontSize(16).fontWeight(FontWeight.Bold)Button(祖父改 themeColor红色Provide 祖辈改后辈同步).width(92%).height(40).fontSize(11).onClick((){this.themeColor#FF4D4Fthis.log祖父改 themeColor红色后辈 Consume 同步})// 中间层组件不用传 props后辈直接 Consume 祖父 Provide 的状态MiddleLayer()Text(日志${this.log}).fontSize(10).fontColor(#333)}.width(92%).padding(10).backgroundColor(#e0f0ff).borderRadius(8)}}// ⚠ 中间层组件不用 props 透传后辈直接 Consume 祖父 Provide 的状态Componentstruct MiddleLayer{build(){Column({space:6}){Text(中间层 MiddleLayer不用 props 透传).fontSize(11).fontColor(#888)// 孙子组件直接 Consume 祖父 Provide 的状态不用中间层透传GrandChild()}.width(88%).padding(8).backgroundColor(#f5f5f5).borderRadius(6)}}// ✅ 孙子组件Consume 消费祖辈 Provide 的跨层级状态Componentstruct GrandChild{Consume(themeColor)themeColor:string// ✅ Consume 后辈消费祖辈 Provide 的跨层级状态build(){Column({space:6}){Text(孙子组件 GrandChildConsume 消费祖辈 Provide 的状态).fontSize(11).fontColor(#2563eb).fontWeight(FontWeight.Bold)Text(孙子看到 themeColor ${this.themeColor}).fontSize(13).fontWeight(FontWeight.Bold).fontColor(this.themeColor)// ✅ 孙子用祖父 Provide 的状态渲染跨层级同步Button(孙子改 themeColor绿色Consume 后辈改祖辈同步).width(92%).height(36).fontSize(10).onClick((){this.themeColor#52C41A// ✅ Consume 后辈改 → 祖父 Provide 同步})}.width(92%).padding(8).backgroundColor(#fff0e0).borderRadius(6)}}EntryComponentstruct Index{build(){Column({space:12}){Text(篇 70 配图Provide/Consume 跨层级传递边界).fontSize(18).fontWeight(FontWeight.Bold).margin({top:20,bottom:8})Text(祖辈 Provide 定义 后辈 Consume 消费跨层级传递不用逐层 props 透传).fontSize(11).fontColor(#888).margin({bottom:12})GrandParent()}.width(100%).height(100%).alignItems(HorizontalAlign.Center)}}写鸿蒙 ArkUI 记住Provide/Consume 不是逐层 props 透传是跨层级传递槽的祖辈后辈同步——Provide 荬饰器编译期绑跨层级传递槽Consume 后辈消费祖辈 Provide 的状态。根因不是逐层 props 透传是跨层级传递槽——Provide 祖辈定义跨层级传递槽不用逐层 props 透传 Consume 后辈消费祖辈 Provide 的状态跨层级同步双向 Provide/Consume vs 逐层 props 透传边界跨层级传递槽 vs 逐层透传冗余 Provide/Consume 必须同名 key跨层级传递槽 key 匹配。Provide/Consume 主题色跨层级传递用跨层级传递槽首选90% 场景Provide/Consume 用户信息跨层级传递用跨层级传递槽后辈消费祖辈状态Provide/Consume 多祖辈多后辈跨层级传递用各 key 各绑各跨层级传递槽。跨层级传递槽不用逐层 props 透传是 ArkUI 状态联动深水区核心