父子组件通信功能实现
<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: '默认内容'
}
}
}
-
Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。
-
添加默认值,子组件可以通过固定值 default 设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下 props 属性必须为对象形式,不能用数组形式。
-
数据单向性,父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将 props 传入的值用 data 接收后作为默认值,再对 data 的值进行修改。
- 子组件的定义
- 父组件的调用
路由功能实现
1.页面的定义
-
在 Pages 文件夹下面新建一个文件夹代表需要的路由,当然,我们也可以新建一个 Ablity 体验,这里演示 Pages.Name。
-
在 新建的文件夹下面务必需要注意新建三个文件
index.hml、index.js、index.css
三个文件,该文件名必须使用 index 来进行命名,使用其他命名会造成文件依赖无法找到。快捷方式,可以选择到对应的 Ability Pages 文件夹下面,然后 new page 直接添加页面,并会自动注册好路由,这是比较方便的
-
在 config.json 文件中
2.路由的使用
- 导入路由模块
import router from '@system.router';
- router.push(OBJECT),跳转到应用内的指定页面。
- router.replace(OBJECT),用应用内的某个页面替换当前页面,并销毁被替换的页面。
- 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'});
- router.clear(),清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
- router.getLength(),获取当前在页面栈内的页面数量。
- router.getState(),获取当前页面的状态信息。
PS:页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。