DevEco Studio 学习(二)
学习网址:
鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili
文档地址:
技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结 (jspang.com)
自定义组件的创立
举例:
{{title}} 点击这里查看隐藏文本 hello world
/* comp.css */ .item { width: 700px; flex-direction: column; height: 300px; align-items: center; margin-top: 100px; } .text-style { width: 100%; text-align: center; font-weight: 500; font-family: Courier; font-size: 36px; } .title-style { font-weight: 500; font-family: Courier; font-size: 50px; color: #483d8b; }
// comp.js export default { props: { title: {default: 'title', }, showObject: {}, }, data() { return {showObj: this.showObject, }; }, childClicked () { this.$emit('eventType1', {text: '收到子组件参数'}); this.showObj = !this.showObj; }, }
引入自定义组件
父组件:{{text}}
/* xxx.css */ .container { background-color: #f8f8ff; flex: 1; flex-direction: column; align-content: center; }
// xxx.js export default { data: { text: '开始', isShow: false, }, textClicked (e) { this.text = e.detail.text; }, }
子组件在props接收
页面路由
导入模块
import router from '@system.router';
router.replace
router.back
router.clear
清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
export default { clearPage() { router.clear(); }}
router.getLength
router.getState