HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用

之前我的文章 harmonyOS 自定义组件基础演示讲解 我们讲解了 自定义组件的基础用法
但是 我们是写在单个page文件中的 这样 我们跨文件使用就很不友好了

如下图 指向 ets目录下 创建一个目录
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第1张图片
按我们 前端开发以往的习惯 这个目录要叫 components 专门放组件集合的地方
然后 按回车 创建目录
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第2张图片
我们在下面创建一个文件 类型肯定是我们 ArkTS 类型的 file
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第3张图片
这里 我们文件随便取名 我这里就叫 General 通用的意思
然后按回车 创建文件
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第4张图片
然后 我们贴一段自定义组件的代码进去

@Component
export struct General {

  build() {
    Row() {
      Text("我是一个自定义组件")
        .fontSize(30)
    }
    .margin({
      top: 15
    })
    .width("100%")
  }
}

因为 要让别的模块使用 所以 我们这里 要用 export 将它导出出来
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第5张图片
然后 我们在需要使用的地方导入
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第6张图片
这里 我们 index.ets 在pages目录下 和 components 在同一目录 那么 我们 …/ 找到上级 目录 然后 找到下面的 components 下的 General
导入它的 General 组件
运行效果如下
HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用_第7张图片
这样就确认 我们组件已经成功导进来了

因为 我们同一个文件 可以写多个组件 所以大部分是 export 导出
如果你确定这个文件只导出一个组件 那么 用 export default
肯定更方便 这个看开发中需要

你可能感兴趣的:(harmonyos,鸿蒙,华为)