Harmonyos application development second assignment notes

1. Custom components

JS UI The framework supports custom components , Users can expand the existing components according to business requirements , Add custom private properties and events , Package into new components , It is convenient to call... Multiple times in the project , Improve the readability of page layout code .

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 .

Custom components are used by users according to business requirements , Combine existing components , Packaged into new components , You can call... Multiple times in a project , Improve the readability of the code .

Custom components are created through element Introduce to the host page , Usage method ：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
         home page 
    </text>
    <comp></comp>
</div>

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 .

 2. Parent-child component communication

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 .