> 文档中心 > HarmonyOS第二次作业

HarmonyOS第二次作业


自定义组件使用

定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css

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

事件绑定:自定义组件中绑定子组件事件使用 (on|@)child1 语法,子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值,父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

父子组件通信功能实现

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

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

  3. 子组件向上传递参数text,父组件接收时通过 e.detail 来获取参数。需要注意的是 父组件中自定义的事件名因为 hml 限制,对大小写不敏感,需要使用 - 进行拼接,但是,在子组件中调用则需要使用「驼峰式」进行 $emit 调用。

路由工功能实现

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

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

  3. router.push(OBJECT),跳转到应用内的指定页面
  4. router.replace(OBJECT),用应用内的某个页面替换当前页面,并销毁被替换的页面。
  5. router.back(OBJECT),返回上一页面或指定的页面。
  6. router.clear(),清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
  7. router.getLength(),获取当前在页面栈内的页面数量。
  8. router.getState(),获取当前页面的状态信息。