Second assignment notes

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 .

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 .
 

1. 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 .
2. Set up CSS style take tabbar Tab bottom 「tabbar.css」

3. 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 ：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 .

4. 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 .

5. 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 .