《HarmonyOS应用开发基础》 课件 实操 项目2-任务6 自定义组件.pptx

任务6自定义组件项目2走进ArkTS声明式开发

任务6自定义组件本任务从自定义组件的分析和创建，到自定义组件的导出、导入和使用，讲解自定义组件的开发过程。任务描述

任务效果图预览

任务实施

0102030504整理工程资源创建自定义组件的目录和文件创建自定义组件并导出验证组件和页面的生命周期导入并调用自定义组件

01整理工程资源

02创建自定义组件目录和文件按官方的建议，自定义的组件放在etsview目录下。默认创建的ArkTS工程是没有这个目录，需要手动创建。在ets目录下新建view目录，再在view目录下新建ArkTSFile文件。

03创建自定义组件并导出分析：当需要完成一个UI设计时，发现UI中有重复出现的元素，或者觉得这个UI以后可以重复使用的，即可把它做成一个自定义的组件。组件中左边的图片和文字，可以由调用者传入，因此将图片和文字抽取成状态变量，并在组件中使用“this.状态变量”进行引用；而右边的图片都是同一个，因此可以不抽取状态变量。组件用@Preview装饰，用来预览自定义的组件；用@Component装饰组件，用exportdefault导出组件。

03导入并调用自定义组件用import导入组件MyItem：importMyItemfrom../view/MyItem;MyItem({image:$r(app.media.msg),text:消息中心})调用组件MyItem：

04验证组件和页面的生命周期

任务6自定义组件本任务主要讲解了ArkTS开发过程中很重要的自定义组件的相关操作，从分析需要自定义的组件开始，到学会抽取自定义组件需要的参数，再到导出和导入组件、调用自定义组件并传递参数，讲解了自定义组件的开发流程。任务小结