一、自定义组件使用

（1）自定义组件创建

定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。
使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件动态设置点击对应 icon 选中。
设置 CSS 样式将 tabbar 选项卡置底「tabbar.css」

（2）自定义组件调用

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

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
       个人中心
    </text>
    <comp index="3"></comp>
</div>

二、父子组件通信功能实现

1、父组件通过props向子组件传值

子组件的定义：

<!-- 务必需要注意的是：子组件的 hml、js、css 三个文件名必须保持一致 -->
<div class="ctest">
    <text class="title">我是子组件</text>
    <text>{
   
   { name }}</text>
</div>

export default {
    // props:[ "name" ],
    props:{
        name:{
            default: '默认内容'
        }
    }
}

父组件的调用：

<element name="ctest" src="../../components/ctest/ctest.hml"></element>
<div class="container">
    <ctest name="父传子内容"></ctest>
</div>

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

（1）普通 slot 插槽分发内容

父组件调用

<ctest>
    <text>默认 slot 分发内容</text>
</ctest>

子组件接收

（2）具名插槽分发内容

父组件调用

<ctest>

<text slot="hasname">具名 slot 分发的内容</text>

</ctest>

子组件接收

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

（1）子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数。

（2）子组件向上传递参数text，父组件接收时通过 e.detail 来获取参数。

（3）需要注意的是父组件中自定义的事件名因为 hml 限制，对大小写不敏感，需要使用 - 进行拼接，但是，在子组件中调用则需要使用「驼峰式」进行 $emit 调用。

三、路由功能实现

1、页面的定义

（1）在 Pages 文件夹下面新建一个文件夹代表需要的路由，当然，我们也可以新建一个 Ablity 体验，这里演示 Pages.Name。

（2）在新建的文件夹下面务必需要注意新建三个文件 index.hml、index.js、index.css 三个文件，该文件名必须使用 index 来进行命名，使用其他命名会造成文件依赖无法找到。

（3）在 config.json 文件中添加

2、路由的使用

（1）导入路由模块

import router from '@system.router';

（2）router.push(OBJECT)，跳转到应用内的指定页面。

（3）router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。

（4）router.back(OBJECT)，返回上一页面或指定的页面。

（5）router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

（6）router.getLength()，获取当前在页面栈内的页面数量。

（7）router.getState()，获取当前页面的状态信息。

注：页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。

最终实现页面的跳转：

OpenHarmony（2）