📚 鸿蒙进阶专栏 · 第 11 篇 / 共 20 篇（进阶篇 11-20）
上一篇：打包上架（入门篇完结） ｜ 下一篇：@Provide/@Consume 与 AppStorage 全局状态

组件化开发：@Builder、@Component 与复用之道

目录

组件化开发：@Builder、@Component 与复用之道

一、@Component：自定义组件

二、@Builder：轻量级 UI 片段

三、父子通信的完整姿势

四、组件设计的 3 条原则

五、下一篇预告

---

 

入门篇我们学会了写页面，但把所有代码塞进一个文件，项目一大就失控。这篇开始进阶：把页面拆成组件，把逻辑拆出页面。

一、@Component：自定义组件

// components/UserCard.ets —— 一次封装，处处使用
@Component
export struct UserCard {
  @Prop name: string = ''
  @Prop level: string = ''
  onEdit?: () => void              // 回调：让父组件响应点击

  build() {
    Row({ space: 12 }) {
      Image($r('app.media.avatar')).width(48).height(48).borderRadius(24)
      Column({ space: 4 }) {
        Text(this.name).fontSize(16).fontWeight(FontWeight.Bold)
        Text(this.level).fontSize(12).fontColor('#999')
      }.alignItems(HorizontalAlign.Start).layoutWeight(1)
      Text('编辑').fontSize(13).fontColor('#0A59F7')
        .onClick(() => this.onEdit?.())
    }
    .padding(14).backgroundColor(Color.White).borderRadius(12)
  }
}

// 页面中使用
import { UserCard } from '../components/UserCard'

UserCard({ name: '张小明', level: 'LV.1',
  onEdit: () => { /* 跳转编辑页 */ } })

二、@Builder：轻量级 UI 片段

不想新建文件、只想复用一小段 UI？用 @Builder，它是「组件内的模板函数」：

@Entry
@Component
struct Demo {
  @Builder
  cell(icon: string, label: string) {
    Row({ space: 8 }) {
      Text(icon).fontSize(18)
      Text(label).fontSize(15)
    }.padding(12)
  }

  build() {
    Column() {
      this.cell('📋', '我的订单')
      this.cell('❤️', '我的收藏')
      this.cell('⚙️', '设置')
    }
  }
}

方式	适用	特点
@Component	跨文件复用、逻辑较多	独立生命周期、可被多页面引用
@Builder	文件内小段 UI 复用	零开销、写法最轻
@Styles / @Extend	批量复用样式	只管样式，不管结构

三、父子通信的完整姿势

父 → 子：@Prop / @Link 传值（入门篇讲过）；子 → 父：回调函数（上面的 onEdit 就是）。记住这个组合，能解决 90% 组件通信需求。更复杂的跨层级通信，下篇讲 @Provide / @Consume。

四、组件设计的 3 条原则

1. 一个组件只做一件事：UserCard 就只展示用户信息
2. 数据从外面传进来：组件内部尽量不写死数据
3. 事件通过回调交出去：组件不决定「点编辑去哪」，由使用方决定

五、下一篇预告

组件多了之后，「状态放哪」会成为新问题。下一篇讲鸿蒙状态管理的完整体系：@Provide/@Consume、AppStorage、PersistentStorage。

---

进阶系列持续更新中，点赞 + 收藏 + 关注不迷路。
遇到问题评论区贴报错信息 + 关键代码，看到都会回。也欢迎留言点播你想看的进阶主题。