> 文档中心 > DevEco Studio 学习(二)

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