HarmonyOS. two

（1）. Creation of custom components

1. Define a folder for storing custom components components.tabbar And set up 3 Base file tabbar.hml、tabbar.js、tabbar.css, It should be noted that ：3 The file names of two files must be consistent , Otherwise, the file will not be found . The purpose of this custom component is to configure a... At the bottom of the page tabbar Tab experience .
2. Set the corresponding settings for the bottom tab json data source , For preservation icon picture 、 title , And click the selected icon picture .
3. Use  toolbar + toolbar-item  Built in components build the bottom tabbar Tab Services 「tabbar.hml」
4. Import tabbarItem data , And set the corresponding data , At the same time, set the click event Click the corresponding button for dynamic setting icon Choose .
5. Set up CSS style take tabbar Tab bottom 「tabbar.css」

（2） Call of custom component

1. name Property refers to the custom component name ( Not required ), Component names are case insensitive , The default is lowercase ,src Properties refer to custom components hml File path ( Required ), If not set name attribute , It is used by default hml Use the file name as the component name .

2. Event binding ： Binding subcomponent events in custom components use (on|@)child1 grammar , Passed in the child component this.$emit('child1', { params: ' Pass parameters ' }) Trigger the event and transfer the value , Parent component execution bindParentVmMethod Method and receive the parameters passed by the subcomponent .

（3） Parent component passed slot Publish content to subcomponents

        1. Ordinary slot Slot distribution  

         2. Named slot distribution

（3） Implementation of routing function

        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

   Use of routes ： 

        1. Import routing module

        2.router.push(OBJECT), Jump to the specified page in the application .

        3.router.replace(OBJECT), Replace the current page with a page in the application , And destroy the replaced page .

        4.router.back(OBJECT), Return to the previous page or the specified page .

        5.router.clear(), Clear all history pages in the page stack , Only keep the current page as the top page of the stack .

        6.router.getLength(), Get the number of pages currently in the page stack .

        7.router.getState(), Get the status information of the current page .