目录
一、自定义组件使用
(1)自定义组件创建
(2)自定义组件调用
二、父子组件通信功能实现
(1)父组件通过 props 向子组件传值
(2)父组件通过 slot 向子组件分发内容
(3)子组件通过自定义事件改变父组件状态
三、路由功能实现
(1)页面的定义
(2)路由的使用
一、自定义组件使用
(1)自定义组件创建
JS UI框架支持自定义组件,用户可根据业务需求将已有的组件进行扩展,增加自定义的私有属性和事件,封装成新的组件,方便在工程中多次调用,提高页面布局代码的可读性。
定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css,需要注意的是:3个文件的文件名必须保持一致,不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
设置底部选项卡对应的 json 数据源,用来保存 icon 图片、标题,以及点击选中后的 icon 图片。
// common.datas.tabbarItem.js export default [ { img:'common/images/home.png', simg:'common/images/home_s.png', name:'首页' }, { img:'common/images/hot.png', simg:'common/images/hot_s.png', name:'热点' }, { img:'common/images/us.png', simg:'common/images/us_s.png', name:'社区' }, { img:'common/images/me.png', simg:'common/images/me_s.png', name:'我' } ]
使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
<div class="container"> <toolbar class="tabbar"> <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item> </toolbar> </div>
导入 tabbarItem 数据,并设置对应 data ,同时设置点击事件 动态设置点击对应 icon 选中。
import tabbarItems from '../../common/datas/tabbarItem.js'; export default { data:{ tabbarItems }, jump(index){ this.tabbarItems.forEach((item,index) => { item.img = tabbarItems[index].img; }); this.tabbarItems[index].img = this.tabbarItems[index].simg; } }
设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」
.tabbar { position: fixed; left: 0; bottom: 0; }
(2)自定义组件调用
自定义组件是用户根据业务需求,将已有的组件组合,封装成的新组件,可以在工程中多次调用,提高代码的可读性。
自定义组件通过element引入到宿主页面,使用方法:
<element name='comp' src='../../components/tabbar/tabbar.hml'></element> <div class="container"> <text class="title"> 首页 </text> <comp></comp> </div>
name 属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写,src 属性指自定义组件hml 文件路径(必填),若没有设置 name 属性,则默认使用 hml 文件名作为组件名。
事件绑定:自定义组件中绑定子组件事件使用 (on|@)child1 语法,子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值,父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。
二、父子组件通信功能实现
(1)父组件通过 props 向子组件传值
Props 自定义组件可以通过 props 声明属性,父组件通过设置属性向子组件传递参数,camelCase(驼峰命名法)的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名)形式,即当属性compProp 在父组件引用时需要转换为 comp-prop。
添加默认值,子组件可以通过固定值 default 设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下 props 属性必须为对象形式,不能用数组形式。
数据单向性,父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将 props 传入的值用 data 接收后作为默认值,再对 data 的值进行修改。
子组件的定义
<!-- 务必需要注意的是:子组件的 hml、js、css 三个文件名必须保持一致 --> <div class="ctest"> <text class="title">我是子组件</text> <text>{{ name }}</text> </div>
export default { // props:[ "name" ], props:{ name:{ default: '默认内容' } } }
父组件的调用
<element name="ctest" src="../../components/ctest/ctest.hml"></element> <div class="container"> <ctest name="父传子内容"></ctest> </div>
(2)父组件通过 slot 向子组件分发内容
1.普通 slot 插槽分发内容
父组件调用
<ctest> <text>默认 slot 分发内容</text> </ctest>
子组件接收
<slot></slot>
2. 具名插槽分发内容
父组件调用
<ctest> <text slot="hasname">具名 slot 分发的内容</text> </ctest
子组件接收
<slot name="hasname"></slot>
(3)子组件通过自定义事件改变父组件状态
子组件也可以通过绑定的事件向上传递参数,在自定义事件上添加传递参数。
子组件向上传递参数text,父组件接收时通过 e.detail 来获取参数。
需要注意的是 父组件中自定义的事件名因为 hml 限制,对大小写不敏感,需要使用 - 进行拼接,但是,在子组件中调用则需要使用「驼峰式」进行 $emit 调用
父组件调用传递自定义事件
<element name="ctest" src="../../components/ctest/ctest.hml"></element> <div class="container"> <!-- 父组件的 title 和 num 可以被子组件修改 --> <text>{{title}}</text> <text>{{num}}</text> <!-- 务必注意事件名对大小写不敏感,需要使用 - 进行拼接--> <ctest name="父传子内容" @change-father-title="changeTitle"></ctest> </div>
export default { data: { title: "我是父组件", num: 0 }, changeTitle(e){ console.log("父组件的方法被子组件模拟触发了"); // 这里需要注意的是:使用 e.detial 来接收传递的参数 this.title = "我被子组件改变了," + e.detail.text; this.num ++; } }
子组件模拟触发父组件传递的自定义事件,实现数据传递
<div class="ctest"> <text class="title">我是子组件</text> <button @click="changeFather()"> 点击改变父组件内容 </button> </div>
export default { // props:[ "name" ], props:{ name:{ default: '默认内容' } }, changeFather(){ console.log("子组件的Button被点击了") // 请务必注意,传递的参数必须是一个对象 this.$emit("changeFatherTitle", { text:"传递的参数" }) } }
三、路由功能实现
(1)页面的定义
在 Pages 文件夹下面新建一个文件夹代表需要的路由,当然,我们也可以新建一个 Ablity 体验,这里演示 Pages.Name。
在 新建的文件夹下面务必需要注意新建三个文件 index.hml、index.js、index.css 三个文件,该文件名必须使用 index 来进行命名,使用其他命名会造成文件依赖无法找到。
快捷方式,可以选择到对应的 Ability Pages 文件夹下面,然后 new page 直接添加页面,并会自动注册好路由,这是比较方便的
在 config.json 文件中
"js": [ { "pages": [ "pages/index/index" ], "name": "default", "window": { "designWidth": 720, "autoDesignWidth": true } } ]
(2)路由的使用
1.导入路由模块
import router from '@system.router';
2.router.push(OBJECT),跳转到应用内的指定页面。
3.router.replace(OBJECT),用应用内的某个页面替换当前页面,并销毁被替换的页面。
4.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'});
5.router.clear(),清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
6.router.getLength(),获取当前在页面栈内的页面数量。
7.router.getState(),获取当前页面的状态信息。
PS:页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。