HarmonyOS鸿蒙Next中如何使用@Component创建自定义组件？@Prop和@Link如何实现父子通信？

在HarmonyOS Next中，使用[@Component](/user/Component)创建自定义组件并实现通信，是构建模块化UI的核心。以下是针对你问题的解答：

1. @Component装饰器与组件结构

[@Component](/user/Component)装饰器用于标记一个自定义组件，使其具备独立的UI、状态和生命周期。基本结构包括：

• 装饰器：[@Component](/user/Component)
• 结构体：包含组件状态变量（@State, [@Prop](/user/Prop), [@Link](/user/Link)等）和UI描述（build()方法）
• build()方法：必需，用于描述UI布局

示例结构：

[@Component](/user/Component)
struct MyComponent {
  // 状态变量
  @State message: string = 'Hello'

  // UI描述
  build() {
    // 返回UI组件树
  }
}

2. @Prop：单向属性传递

[@Prop](/user/Prop)用于接收父组件传递的只读数据，实现单向同步：

• 父组件修改数据会同步到子组件
• 子组件不能直接修改[@Prop](/user/Prop)变量（修改不会同步回父组件）

示例：

// 子组件
[@Component](/user/Component)
struct ChildComponent {
  [@Prop](/user/Prop) title: string  // 接收父组件传递的title
  
  build() {
    Text(this.title)
  }
}

// 父组件
@Entry
[@Component](/user/Component)
struct ParentComponent {
  @State parentTitle: string = '父组件标题'
  
  build() {
    Column() {
      // 传递数据给子组件
      ChildComponent({ title: this.parentTitle })
    }
  }
}

3. @Link：双向数据绑定

[@Link](/user/Link)建立父子组件间的双向同步：

• 父组件和子组件共享同一数据源
• 任何一方的修改都会同步到另一方

示例：

// 子组件
[@Component](/user/Component)
struct ChildComponent {
  [@Link](/user/Link) @Watch('onCountChange') count: number  // 双向绑定
  
  onCountChange() {
    console.log('count changed:', this.count)
  }
  
  build() {
    Button('子组件+1')
      .onClick(() => {
        this.count++  // 修改会同步到父组件
      })
  }
}

// 父组件
@Entry
[@Component](/user/Component)
struct ParentComponent {
  @State count: number = 0
  
  build() {
    Column() {
      Text(`父组件count: ${this.count}`)
      ChildComponent({ count: $count })  // 使用$符号建立双向绑定
    }
  }
}

4. 导出组件

使用export关键字导出组件，使其可在其他文件中导入使用：

// MyComponent.ets
[@Component](/user/Component)
export struct MyComponent {  // 添加export
  [@Prop](/user/Prop) message: string
  
  build() {
    Text(this.message)
  }
}

// 在其他文件中导入
import { MyComponent } from './MyComponent'

@Entry
[@Component](/user/Component)
struct MainPage {
  build() {
    MyComponent({ message: '导入的组件' })
  }
}

5. 生命周期方法

• aboutToAppear()：组件即将出现时调用，用于初始化操作
• aboutToDisappear()：组件即将销毁时调用，用于清理资源

示例：

[@Component](/user/Component)
struct LifecycleComponent {
  @State data: string = ''
  
  aboutToAppear() {
    // 组件显示前初始化
    this.data = '初始化数据'
    console.log('组件即将显示')
  }
  
  aboutToDisappear() {
    // 组件销毁前清理
    console.log('组件即将销毁')
  }
  
  build() {
    Text(this.data)
  }
}

完整示例：封装计数器组件

// CounterComponent.ets
[@Component](/user/Component)
export struct CounterComponent {
  [@Link](/user/Link) value: number  // 双向绑定计数器值
  [@Prop](/user/Prop) label: string = '计数器'  // 单向接收标签
  
  aboutToAppear() {
    console.log('计数器组件初始化')
  }
  
  build() {
    Column() {
      Text(`${this.label}: ${this.value}`)
        .fontSize(20)
      
      Row() {
        Button('-')
          .onClick(() => this.value--)
        
        Button('+')
          .onClick(() => this.value++)
      }
    }
  }
}

// 使用组件
@Entry
[@Component](/user/Component)
struct MainPage {
  @State count: number = 0
  
  build() {
    Column() {
      CounterComponent({
        value: $count,  // 双向绑定
        label: '点击计数'  // 单向传递
      })
    }
  }
}

关键点总结

• [@Component](/user/Component)定义可复用UI单元，必须包含build()方法
• [@Prop](/user/Prop)实现父到子的单向数据流，适合展示型组件
• [@Link](/user/Link)实现父子双向同步，适合交互型组件
• export使组件可跨文件复用
• 生命周期方法用于资源管理，注意aboutToAppear中避免耗时操作

这种组件化模式支持高内聚、低耦合的UI开发，通过组合[@Prop](/user/Prop)和[@Link](/user/Link)可以灵活处理各种父子通信场景。