HarmonyOS应用开发培训第二次

父子组件通信功能实现

<element name="ctest" src="../../components/ctest/ctest.hml"></element>
<div class="container">
    <ctest name="父传子内容"></ctest>
</div>
<!-- 务必需要注意的是:子组件的 hml、js、css 三个文件名必须保持一致 -->
<div class="ctest">
    <text class="title">我是子组件</text>
    <text>{{ name }}</text>
</div>
export default {
    // props:[ "name" ],
    props:{
        name:{
            default: '默认内容'
        }
    }
}
  1. Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。

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

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

  4. 子组件的定义
  5. 父组件的调用

路由功能实现

1.页面的定义

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

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

    快捷方式,可以选择到对应的 Ability Pages 文件夹下面,然后 new page 直接添加页面,并会自动注册好路由,这是比较方便的

  3. 在 config.json 文件中

     

2.路由的使用 

  1. 导入路由模块
import router from '@system.router';
  1. router.push(OBJECT),跳转到应用内的指定页面。
  2. router.replace(OBJECT),用应用内的某个页面替换当前页面,并销毁被替换的页面。
  3. router.back(OBJECT),返回上一页面或指定的页面。
// index页面,uri字段是页面路由,由配置文件中的pages列表指定。
router.push({
  uri: 'pages/detail/detail',
});
// detail页面
router.push({
  uri: 'pages/mall/mall',
});
// mall页面通过back,将返回detail页面
router.back();
// detail页面通过back,将返回index页面
router.back();
// 通过back,返回到detail页面
router.back({uri:'pages/detail/detail'});
  1. router.clear(),清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
  2. router.getLength(),获取当前在页面栈内的页面数量。
  3. router.getState(),获取当前页面的状态信息。

PS:页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

菜鸟不是

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值