> 文档中心 > HarmonyOS应用开发第二次作业

HarmonyOS应用开发第二次作业

目录

一、自定义组件

1.1自定义组件创建

1.2自定义组件调用

二、父子通信功能

2.1父组件通过props向子组件传值

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

2.3 子组件通过自定义事件改变组件状态

三、页面路由

四、补充

tabs组件

​编辑 ​编辑


一、自定义组件

1.1自定义组件创建

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

如图所示: 

1.2自定义组件调用

  • 用户可根据业务需求将已有的组件进行扩展,增加自定义的私有属性和事件,封装成新的组件,方便在工程中多次调用,提高页面布局代码的可读性。
  • name属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写。src属性指自定义组件hml文件路径(必填),若没有设置name属性,则默认使用hml文件名作为组件名。
  • 事件绑定:自定义组件中绑定子组件事件使用(on|@)child1语法,子组件中通过this.$emit('child1', { params: '传递参数' })触发事件并进行传值,父组件执行bindParentVmMethod方法并接收子组件传递的参数。

 

二、父子通信功能

2.1父组件通过props向子组件传值

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

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

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

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

具名 slot 分发的内容

如图所示

2.3 子组件通过自定义事件改变组件状态

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

 这就需要自定义组件的知识

三、页面路由

导入路由模块,首先要做到事情

import router from '@system.router';

然后重点就介绍一下router.push,其是跳转到应用内的指定页面。代码如下

router.push({  uri: 'pages/detail/detail',})

 其他还有好多,想要了解,进入官网API查看:文档中心

四、补充

tabs组件

 

 具体应用如下图:

页面可以随着页签改变而改变 

ChineseCigarette