暑期鸿蒙第五次培训笔记

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

一、自定义组件使用

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。
   1.  
      // common.datas.tabbarItem.js
   2.  
      export default [
   3.  
      {
   4.  
      img:'common/images/home.png',
   5.  
      simg:'common/images/home_s.png',
   6.  
      name:'首页'
   7.  
      },
   8.  
      {
   9.  
      img:'common/images/hot.png',
   10.  
       simg:'common/images/hot_s.png',
   11.  
       name:'热点'
   12.  
       },
   13.  
       {
   14.  
       img:'common/images/us.png',
   15.  
       simg:'common/images/us_s.png',
   16.  
       name:'社区'
   17.  
       },
   18.  
       {
   19.  
       img:'common/images/me.png',
   20.  
       simg:'common/images/me_s.png',
   21.  
       name:'我'
   22.  
       }
   23.  
       ]
   
3. 使用 toolbar toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
   1.  
      <div class="container">
   2.  
      <toolbar class="tabbar">
   3.  
      <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item>
   4.  
      </toolbar>
   5.  
      </div>
4. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」
   1.  
      import tabbarItems from '../../common/datas/tabbarItem.js';
   2.  
      export default {
   3.  
      data:{
   4.  
      tabbarItems
   5.  
      },
   6.  
      jump(index){
   7.  
      this.tabbarItems.forEach((item,index) => {
   8.  
      item.img = tabbarItems[index].img;
   9.  
      });
   10.  
       this.tabbarItems[index].img = this.tabbarItems[index].simg;
   11.  
       }
   12.  
       }
5. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

二、自定义组件调用

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

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

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

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

最后得到的效果图：

这篇好文章是转载于：学新通技术网