The second harmonyos application development training

Implementation of parent-child component communication function

<element name="ctest" src="../../components/ctest/ctest.hml"></element>
<div class="container">
    <ctest name=" Parent to child content "></ctest>
</div>

<!--  It is important to note that ： Subcomponents  hml、js、css  The three file names must be consistent  -->
<div class="ctest">
    <text class="title"> I am a subcomponent </text>
    <text>{
   { name }}</text>
</div>

export default {
    // props:[ "name" ],
    props:{
        name:{
            default: ' Default content '
        }
    }
}

1. Props Custom components can be created by props Declarative attribute , The parent component passes parameters to the child component by setting properties ,camelCase（ Hump nomenclature ） Of prop name , When an external parent component passes parameters, it needs to use kebab-case （ Short horizontal lines separate the names ） form , That is, when attribute compProp When the parent component references, it needs to be converted to comp-prop.

2. Add default , Subcomponents can be defined by fixed values default Set the default value , When the parent component does not set this property , Its default value will be used . In this case props Property must be in object form , It can't be in an array .

3. Data unidirectionality , The data transfer between parent and child components is one-way , Can only be passed from parent component to child component , The child component cannot directly modify the value passed down by the parent component , Can be props The value passed in is in data As the default value after receiving , Right again data Change the value of .

4. The definition of subcomponents
5. Call of parent component

Routing function implementation

1. Page definition

1. stay Pages Create a new folder under the folder to represent the required route , Of course , We can also create a new one Ablity Experience , Here's a demonstration Pages.Name.

2. stay Under the new folder, be sure to create three new files  index.hml、index.js、index.css  Three files , The file name must use index To name it , Using other names will result in file dependencies not being found .

   Shortcut , You can select the corresponding Ability Pages Under the folder , then new page Add page directly , And will automatically register the route , This is more convenient

3. stay config.json In file

    

2. Use of routes  

1. Import routing module

import router from '@system.router';

1. router.push(OBJECT), Jump to the specified page in the application .
2. router.replace(OBJECT), Replace the current page with a page in the application , And destroy the replaced page .
3. router.back(OBJECT), Return to the previous page or the specified page .

// index page ,uri The field is page routing , By... In the configuration file pages List assignments .
router.push({
  uri: 'pages/detail/detail',
});
// detail page 
router.push({
  uri: 'pages/mall/mall',
});
// mall Page passing back, Will return detail page 
router.back();
// detail Page passing back, Will return index page 
router.back();
//  adopt back, Back to detail page 
router.back({uri:'pages/detail/detail'});

1. router.clear(), Clear all history pages in the page stack , Only keep the current page as the top page of the stack .
2. router.getLength(), Get the number of pages currently in the page stack .
3. router.getState(), Get the status information of the current page .

PS： Page routing can only be called after page rendering , stay onInit and onReady In the life cycle, the page is still in the rendering stage , It is forbidden to call page routing method .