HarmonyOS应用开发第二次作业
目录
1.1自定义组件创建
1.2自定义组件调用
二、父子通信功能
2.1父组件通过props向子组件传值
2.2父组件通过slot向子组件分发内容
2.3 子组件通过自定义事件改变组件状态
三、页面路由
四、补充
tabs组件
编辑 编辑
一、自定义组件
1.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」
如图所示:
1.2自定义组件调用
- 用户可根据业务需求将已有的组件进行扩展,增加自定义的私有属性和事件,封装成新的组件,方便在工程中多次调用,提高页面布局代码的可读性。
- name属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写。src属性指自定义组件hml文件路径(必填),若没有设置name属性,则默认使用hml文件名作为组件名。
- 事件绑定:自定义组件中绑定子组件事件使用(on|@)child1语法,子组件中通过this.$emit('child1', { params: '传递参数' })触发事件并进行传值,父组件执行bindParentVmMethod方法并接收子组件传递的参数。
二、父子通信功能
2.1父组件通过props向子组件传值
Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。
添加默认值,子组件可以通过固定值 default 设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下 props 属性必须为对象形式,不能用数组形式。
数据单向性,父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将 props 传入的值用 data 接收后作为默认值,再对 data 的值进行修改。
2.2父组件通过slot向子组件分发内容
具名 slot 分发的内容
如图所示
2.3 子组件通过自定义事件改变组件状态
- 子组件也可以通过绑定的事件向上传递参数,在自定义事件上添加传递参数。
- 子组件向上传递参数text,父组件接收时通过 e.detail 来获取参数。
- 需要注意的是 父组件中自定义的事件名因为 hml 限制,对大小写不敏感,需要使用 - 进行拼接,但是,在子组件中调用则需要使用「驼峰式」进行 $emit 调用。
{{title}} {{num}}
这就需要自定义组件的知识
三、页面路由
导入路由模块,首先要做到事情
import router from '@system.router';
然后重点就介绍一下router.push,其是跳转到应用内的指定页面。代码如下
router.push({ uri: 'pages/detail/detail',})
其他还有好多,想要了解,进入官网API查看:文档中心
四、补充
tabs组件
具体应用如下图:
页面可以随着页签改变而改变