在harmonyos中创建可复用自定义组件需用@component装饰器封装ui与逻辑，通过相对路径导入调用；须新建components目录及大驼峰命名的arkts文件，build()内仅允许一个根容器，支持@prop传参、@state管理状态及回调函数实现父子通信。
在华为HarmonyOS系统中创建可复用的自定义组件，核心是用@Component装饰器封装UI结构与逻辑，再通过相对路径导入到其他页面调用——不写重复代码，改一处就全更新。
创建自定义组件文件
在项目src/main/ets目录下，右键→New → Directory，新建名为components的文件夹；接着在该文件夹上右键→New → ArkTS File，文件名填WelcomeComponent.ets（必须大驼峰，且与后续struct名一致）。
打开WelcomeComponent.ets，先写import语句，再用@Component + export struct声明组件结构体。注意：build()方法必须存在，且内部只能有一个根容器（如Column/Row/Stack），否则编译报错。
这一步操作起来很简单，直接把文件拖进去就行。
编写无参数自定义组件
在WelcomeComponent.ets中粘贴以下代码：
// 导入系统基础组件
import { Column, Text, FontWeight, HorizontalAlign } from '@kit.ArkUI';
@Component
export struct WelcomeComponent {
build() {
Column() {
Text('我的第一个鸿蒙自定义组件')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor('#1890FF')
Text('零基础入门 · 无参数组件')
.fontSize(14)
.fontColor('#666666')
.margin({ top: 10 })
}
.width('100%')
.padding(20)
.backgroundColor('#F5F7FA')
.borderRadius(12)
.alignItems(HorizontalAlign.Center)
}
}
【build()内必须有且仅有一个根容器】，多写一个Column或漏掉外层容器括号都会导致编译失败。
在页面中导入并使用组件
打开pages目录下的Index.ets（或其他页面文件），在顶部import区域添加导入语句：
import { WelcomeComponent } from '../components/WelcomeComponent';
然后在@Entry装饰的Index组件build()方法里，像调用Button一样直接写WelcomeComponent()即可。
注意路径写法：../表示从pages目录向上退一级到src/main/ets，再进入components文件夹。路径写错会导致“找不到模块”编译错误。
封装带参数的可复用组件
方法一：用@Prop接收父组件传入的字符串或数字
修改WelcomeComponent.ets，在@Component下方、build()上方添加一行：
@Prop title: string = '默认标题';
再把build()里第一个Text('我的第一个鸿蒙自定义组件')替换成Text(this.title)。
方法二：用@State管理内部状态，配合事件函数实现交互
在struct内新增@State count: number = 0;，并在Column内加一个Button，onClick里写this.count++，再加个Text显示this.count。
方法三：组合使用@Prop和回调函数，实现父子通信
添加@Prop onConfirm: () => void;，在确认按钮的onClick里调用this.onConfirm()。这样父页面传进来的函数就能被触发执行。
复用组件时传递参数
第一步：在Index.ets的build()中，把WelcomeComponent()改成：
WelcomeComponent({
title: '欢迎来到首页',
onConfirm: () => {
console.log('用户点了确认');
}
});
第二步：确保WelcomeComponent.ets中已声明对应@Prop字段，且类型匹配（string对应string，() => void对应() => void）。
第三步：保存后重新运行，页面会显示新标题，并在点击确认按钮时输出日志。
如果参数名拼写错误（比如写成tilte）、类型不匹配（传string却声明为number），IDE会实时标红提示，编译阶段直接拦截。
