Create Component
In ofa.js, components are the core mechanism for achieving page reuse and modularity. A component is essentially a custom Web Component; by defining its template, styles, and logic, you can create reusable UI elements.
Component Basic Structure
Unlike page modules, component modules replace the <template> element's page attribute with a component attribute and declare a tag attribute to specify the component's tag name.
At the location where the component is needed, asynchronously load the component module via the l-m tag, and the system will automatically complete the registration; the component can then be used directly like a regular HTML tag.
{{title}}
Core Component Concepts
tag - Component Tag Name
tag is the component's tag name and must match the tag name used for the component. For example, if your component's tag is defined as "demo-comp", you must use <demo-comp></demo-comp> in the HTML.
Component Module Reference
Introduce component modules through the l-m tag, and the component modules will automatically register the components. This is similar to using the script tag to introduce scripts, but l-m is specifically used for loading and registering component modules.
Note: The
l-mreference tag is an asynchronous reference, suitable for loading components on demand when the page loads.
Sync Reference Component
In some scenarios, you may need to synchronously load components (e.g., to ensure that components are registered before use). In this case, you can use the load method with the await keyword to achieve synchronous reference.
In both component modules and page modules, the load function is automatically injected for developers to synchronously load the required resources.
{{title}}
Asynchronous Reference vs Synchronous Reference
| Citation Method | Keyword | Feature |
|---|---|---|
| Asynchronous Citation | l-m tag |
Non-blocking loading, suitable for on-demand component loading |
| Synchronous Citation | load method with await keyword |
Blocking loading, ensures component is registered before use |