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

╰半夏微凉° 2024-04-22 07:29 70阅读 0赞

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

如下图 指向 ets目录下 创建一个目录  
![在这里插入图片描述][87d46c75106a4360bbee9b76fba234fe.png]  
按我们 前端开发以往的习惯 这个目录要叫 components 专门放组件集合的地方  
然后 按回车 创建目录  
![在这里插入图片描述][d5c2aec70c2f43ab9890f2118ef4b80a.png]  
我们在下面创建一个文件 类型肯定是我们 ArkTS 类型的 file  
![在这里插入图片描述][1c8aaeee79214ec38a9950d873658400.png]  
这里 我们文件随便取名 我这里就叫 General 通用的意思  
然后按回车 创建文件  
![在这里插入图片描述][f028597aecae4ebcb3dedcb9a044a732.png]  
然后 我们贴一段自定义组件的代码进去

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

因为 要让别的模块使用 所以 我们这里 要用 export 将它导出出来  
![在这里插入图片描述][78e7985aa9624ae0a07c85de03d4e287.png]  
然后 我们在需要使用的地方导入  
![在这里插入图片描述][d8aa9bb5720e4fc38269eb7d41328b64.png]  
这里 我们 index.ets 在pages目录下 和 components 在同一目录 那么 我们 …/ 找到上级 目录 然后 找到下面的 components 下的 General  
导入它的 General 组件  
运行效果如下  
![在这里插入图片描述][472ede7a393c416c9916962994b14fd3.png]  
这样就确认 我们组件已经成功导进来了

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

[harmonyOS]: https://blog.csdn.net/weixin_45966674/article/details/135084754
[87d46c75106a4360bbee9b76fba234fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ac25576e4f654561a33a8274c5d6794b.png
[d5c2aec70c2f43ab9890f2118ef4b80a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7e8e1f43f3e74d56b412cd23aeee048a.png
[1c8aaeee79214ec38a9950d873658400.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/28db2eaa861741c4adef8ac107db5801.png
[f028597aecae4ebcb3dedcb9a044a732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e19884be210a417998a05eb27340dc6a.png
[78e7985aa9624ae0a07c85de03d4e287.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b38c5504c351462aa677938494e452e4.png
[d8aa9bb5720e4fc38269eb7d41328b64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/52b0023ebaee48a7aa6d1124c1475c98.png
[472ede7a393c416c9916962994b14fd3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e34dd3b41f99448c807e0eb39f023071.png