Second harmonyos training

• Section 10 Custom components use （ Add more pages , Bottom tab ）
  • Custom component creation （js Use absolute path for pictures ）
    • 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 .
    • Set the corresponding settings for the bottom tab json data source , For preservation icon picture 、 title , And click the selected icon picture （ Pictures must use absolute paths ）
    • Use toolbar + toolbar-item Built in components build the bottom tabbar Tab Services 「tabbar.hml」
    • 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
    • Set up CSS style take tabbar Tab bottom 「tabbar.css」
  • Custom component calls
    • 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
    • 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
  • 

   

• Section 11 Implementation of parent-child component communication function
  • Parent component passed props Pass values... To subcomponents
    • 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.
    • 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 .
    • 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
  • Parent component passed slot Distribute content to subcomponents
  • Child components change the state of parent components through custom events
    • Subcomponents can also pass up parameters through bound events , Add a pass parameter to a custom event .
    • Subcomponents pass parameters up text, When the parent component receives, it passes e.detail To get the parameters .
    • It should be noted that The custom event name in the parent component is because hml Limit , Case insensitive , Need to use - Splicing , however , Calling in a subcomponent requires the use of 「 Hump type 」 Conduct $emit call .
• Section 12 Routing function implementation
  • Page definition
    • 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.
    • 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
    • stay config.json In file
  • Use of routes
    • Import routing module
    • router.push(OBJECT), Jump to the specified page in the application .
    • router.replace(OBJECT), Replace the current page with a page in the application , And destroy the replaced page .
    • router.back(OBJECT), Return to the previous page or the specified page .
    • router.clear(), Clear all history pages in the page stack , Only keep the current page as the top page of the stack .
    • router.getLength(), Get the number of pages currently in the page stack .
    • 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