HarmonyOS应用开发培训笔记2_自定义组件可以声明props属性,父组件

自定义组件

先定义一个专门存放自定义组件的文件夹 components.tabbar 并设置css、js、hml3个基础文件,选取找好的icon图标放到指定位置

使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务

导入 tabbarItem 数据，设置点击事件，点击后图片发生变换，在设置css数据让tabber置底

自定义组件通过element引入到宿主页面

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
        首页
    </text>
    <comp></comp>
</div>

父子组件通讯

父组件通过props向子组件传递值：

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

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

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

父组件通过slot向子组件传递内容：

自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素

<!-- comp.hml -->
<div class="item">  
   <text class="text-style">下面使用父组件定义的内容</text> 
   <slot></slot> 
</div>

引用方法：

<!-- xxx.hml --> 
 <element name='comp' src='../../common/component/comp.hml'></element>  
 <div class="container">  
   <comp>
     <text class="text-style">父组件中定义的内容</text> 
   </comp>  
 </div>

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

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

路由功能实现

导入路由模块

import router from '@system.router';

router.push(OBJECT)，跳转到应用内的指定页面

router.push({
                    uri:"pages/index/index",
                    params:{
                        info:"路由参数"
                    }
                })