Custom Component
#
Custom ComponentDevelopers can abstract parts of a page into custom components for use across different pages, or to divide a page into multiple low-coupling modules for easy maintenance. Custom components work almost in the same way as basic components.
#
Creating a Custom ComponentLike a page, a custom component includes json, bxml, bxss, and js files. To create a custom component, first declare the custom component in the json file.
You can then write a component template in the bxml file and a component style in the bxss file, as you would when creating a page.
Code example:
Note: You should not use ID selectors, attribute selectors, or tag name selectors in the component's bxss.
In the js file of the custom component, you should register the component using Component()
, specifying the component's property definitions, data, and custom methods.
The component's property values and data are used to render the bxml of the component. The property values are passed to the component externally.
Code example:
#
Using a Custom ComponentTo use a registered custom component, you need to declare a reference to it in the page's json file. You should specify the tag name of each custom component and the file path to the appropriate custom component:
Then, you can use the custom components in the page's bxml in much the same way as you would use base components. The node name is the custom component's tag name, and the node property is the property value passed to the component.
Code example:
Once the custom component's bxml node structure is combined with the data, it will be inserted at the referenced location.