HarmonyOS应用开发培训第二次

父子组件通信功能实现

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

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

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

1. Props 自定义组件可以通过 props 声明属性，父组件通过设置属性向子组件传递参数，camelCase（驼峰命名法）的 prop 名，在外部父组件传递参数时需要使用 kebab-case （短横线分隔命名）形式，即当属性compProp 在父组件引用时需要转换为 comp-prop。

2. 添加默认值，子组件可以通过固定值 default 设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下 props 属性必须为对象形式，不能用数组形式。

3. 数据单向性，父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将 props 传入的值用 data 接收后作为默认值，再对 data 的值进行修改。

4. 子组件的定义
5. 父组件的调用

路由功能实现

1.页面的定义

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

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

   快捷方式，可以选择到对应的 Ability Pages 文件夹下面，然后 new page 直接添加页面，并会自动注册好路由，这是比较方便的

3. 在 config.json 文件中

    

2.路由的使用 

1. 导入路由模块

import router from '@system.router';

1. router.push(OBJECT)，跳转到应用内的指定页面。
2. router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。
3. router.back(OBJECT)，返回上一页面或指定的页面。

// index页面，uri字段是页面路由，由配置文件中的pages列表指定。
router.push({
  uri: 'pages/detail/detail',
});
// detail页面
router.push({
  uri: 'pages/mall/mall',
});
// mall页面通过back，将返回detail页面
router.back();
// detail页面通过back，将返回index页面
router.back();
// 通过back，返回到detail页面
router.back({uri:'pages/detail/detail'});

1. router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
2. router.getLength()，获取当前在页面栈内的页面数量。
3. router.getState()，获取当前页面的状态信息。

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