Developers can abstract feature modules in a page into custom components to reuse them in different pages, or split a page into multiple low-coupling modules for easy code maintenance. Custom components are used in almost the same way as base components.
Similar to a page, a custom component consists of json, bxml, bxss, and js files. To write a custom component, you first need to make a custom component declaration in the json file.
In the meanwhile, write a component template in the bxml file and a component style in the bxss file in a same way that you write a page. For details and considerations.
Note: ID selectors, attribute selectors, and tag name selectors should not be used in the component's bxss.
In the custom component's js file, you need to register the component using
Component() and provide the component's property definitions, internal data, and custom methods.
The property values and internal data of the component are used to render the component's bxml. The property values are passed in from outside the component. For details, see Component Constructor.
Before using a registered custom component, make a reference declaration in the json file of the page. You need to provide the tag name of each custom component and the file path of the corresponding custom component:
As such, you can use custom components like you would with base components in the bxml of the page. The node name is the tag name of the custom component, and the node property is the property value passed to the component.
The custom component's bxml node structure, after being combined with the data, will be inserted into the reference location.