HarmonyOS应用开发培训笔记2
自定义组件
先定义一个专门存放自定义组件的文件夹 components.tabbar 并设置css、js、hml3个基础文件,选取找好的icon图标放到指定位置
使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务
导入 tabbarItem 数据,设置点击事件,点击后图片发生变换,在设置css数据让tabber置底
自定义组件通过element引入到宿主页面
首页
父子组件通讯
父组件通过props向子组件传递值:
-
Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。
-
添加默认值,子组件可以通过固定值 default 设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下 props 属性必须为对象形式,不能用数组形式。
-
数据单向性,父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将 props 传入的值用 data 接收后作为默认值,再对 data 的值进行修改。
父组件通过slot向子组件传递内容:
自定义组件中通过slot标签来承载父组件中定义的内容,使用slot标签可以更加灵活的控制自定义组件的内容元素
下面使用父组件定义的内容
引用方法:
父组件中定义的内容
子组件通过自定义事件改变父组件状态:
- 子组件也可以通过绑定的事件向上传递参数,在自定义事件上添加传递参数。
- 子组件向上传递参数text,父组件接收时通过 e.detail 来获取参数。
- 需要注意的是 父组件中自定义的事件名因为 hml 限制,对大小写不敏感,需要使用 - 进行拼接,但是,在子组件中调用则需要使用「驼峰式」进行 $emit 调用。
路由功能实现
导入路由模块
import router from '@system.router';
router.push(OBJECT),跳转到应用内的指定页面
router.push({ uri:"pages/index/index", params:{ info:"路由参数" } })
开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系