暑期鸿蒙第五次培训笔记

文章参考文献及视频：技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结 (jspang.com)

一、自定义组件使用

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

   // common.datas.tabbarItem.js
   export default [
       {
           img:'common/images/home.png',
           simg:'common/images/home_s.png',
           name:'首页'
       },
       {
           img:'common/images/hot.png',
           simg:'common/images/hot_s.png',
           name:'热点'
       },
       {
           img:'common/images/us.png',
           simg:'common/images/us_s.png',
           name:'社区'
       },
       {
           img:'common/images/me.png',
           simg:'common/images/me_s.png',
           name:'我'
       }
   ]

3. 使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」

   <div class="container">
       <toolbar class="tabbar">
           <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item>
       </toolbar>
   </div>

4. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

   import tabbarItems from '../../common/datas/tabbarItem.js';
   export default {
       data:{
           tabbarItems
       },
       jump(index){
           this.tabbarItems.forEach((item,index) => {
               item.img = tabbarItems[index].img;
           });
           this.tabbarItems[index].img = this.tabbarItems[index].simg;
       }
   }

5. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

二、自定义组件调用

自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。

自定义组件通过element引入到宿主页面，使用方法：

1.name 属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写，src 属性指自定义组件hml 文件路径(必填)，若没有设置 name 属性，则默认使用 hml 文件名作为组件名。

2.事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

最后得到的效果图：