鸿蒙2222222

1.自定义组件的创建和使用
定义专门存放自定义组件的文件夹 components.xxx，并设置3个基础文件 xxx.hml、xxx.js、xxx.css.

设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

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

<div class="container">
    <toolbar class="tabbar">
        <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' οnclick="jump($idx)" ></toolbar-item>
    </toolbar>
</div>
导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中。

设置 CSS 样式 

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

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
 2.父子组件通信功能实现
参考文档：
技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结 (jspang.com)
1.父组件通过props向子组件传值

2.父组件通过slot向子组件分发内容

3.子组件通过自定义事件改变父组件状态

3.路由跳转实现
导入路由模块，调用router的push方法。

了解router的方法