> 文档中心 > HarmonyOS应用开发培训第二次

HarmonyOS应用开发培训第二次


父子组件通信功能实现

我是子组件 {{ name }}
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生命周期中页面还处于渲染阶段,禁止调用页面路由方法。

开发者涨薪指南 HarmonyOS应用开发培训第二次 48位大咖的思考法则、工作方式、逻辑体系