Crear componente
En ofa.js, los componentes son el mecanismo central para lograr la reutilización de páginas y la modularización. Un componente es esencialmente un Web Component personalizado que, al definir plantillas, estilos y lógica, permite crear elementos de interfaz de usuario reutilizables.
Estructura básica del componente
A diferencia de los módulos de página, el elemento <template> del módulo de componente utiliza el atributo component y declara el atributo tag para especificar el nombre de la etiqueta del componente.
En la ubicación donde se necesita utilizar el componente, carga de forma asíncrona el módulo del componente mediante la etiqueta l-m; el sistema completará automáticamente el registro; después, puedes utilizar el componente directamente como una etiqueta HTML común.
{{title}}
Conceptos centrales del componente
tag - nombre de la etiqueta del componente
tag es el nombre de la etiqueta del componente, debe coincidir con el nombre de la etiqueta utilizada para el componente. Por ejemplo, si el tag de tu componente se define como "demo-comp", entonces al usarlo en HTML debes escribir <demo-comp></demo-comp>.
Referencia al módulo de componentes
Se introduce el módulo de componente mediante la etiqueta l-m, y el módulo se registra automáticamente. Es similar a incluir un script con la etiqueta script, pero l-m está diseñada específicamente para cargar y registrar módulos de componentes.
Nota: La etiqueta de referencia
l-mes una referencia asíncrona, adecuada para cargar componentes bajo demanda al cargar la página.
Componente de referencia sincrónica
En ciertos escenarios, es posible que necesites cargar componentes de forma síncrona (por ejemplo, asegurarte de que el componente esté registrado antes de usarlo). En este caso, puedes usar el método load junto con la palabra clave await para lograr una referencia síncrona.
En los módulos de componentes y en los módulos de páginas, se inyecta automáticamente la función load, que permite a los desarrolladores cargar de forma sincrónica los recursos necesarios.
{{title}}
Referencia asíncrona vs referencia síncrona
| Modo de referencia | Palabra clave | Característica |
|---|---|---|
| Referencia asíncrona | Etiqueta l-m |
Carga no bloqueante, adecuada para cargar componentes bajo demanda |
| Referencia síncrona | Método load con la palabra clave await |
Carga bloqueante, asegura que los componentes estén registrados antes de su uso |