暑期鸿蒙第五次培训笔记

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

一、自定义组件使用

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

   // common.datas.tabbarItem.jsexport 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」

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 方法并接收子组件传递的参数。

最后得到的效果图：