Tengo un SPA que usa Vue y el diseño predeterminado es un html en el encabezado, seguido de un componente secundario abstracto que se inyecta en la página. Cada uno de los elementos secundarios tiene un cargador, de modo que mientras se carga la página, el usuario ve el encabezado html y se presenta el ícono de carga mientras el elemento secundario obtiene datos del servidor y los representa:
<navbar/> <child id="main-content"/>Ahora necesito agregar un pie de página a cada página. Sin embargo, no se ve tan bien como agregar el pie de página en el diseño principal predeterminado, lo que da como resultado que se muestre el encabezado, luego el ícono de carga, luego el pie de página que finalmente se empuja hacia abajo solo después de que los datos se obtienen del servidor dentro del niño. :
<navbar/> <child id="main-content"/> <footer> Stuff in my footer that should not be shown until the child component is completely loaded </footer>¿Hay alguna forma de ocultar el pie de página en el componente principal hasta que el elemento secundario haya procesado todos sus datos? Espero una solución que pueda implementarse una vez desde el padre sin tener que agregar $ emit a cada uno de los hijos.
Si está utilizando Vue 2, podría implementar un bus de eventos global .
El patrón de bus de eventos / publicación-suscripción es una forma de hacer que las secciones no relacionadas de su aplicación se comuniquen entre sí.
Aunque, esta pregunta parece exponer un problema mayor en la gestión de datos de su aplicación. Según tengo entendido, todos los datos que dependen deben provenir de la misma sección. Por ejemplo, si su footer de página y su componente child dependen de otro, entonces el elemento parent debe buscar los datos para el elemento child y pasarlos como accesorios. De esta manera, puede manejar el estado de carga de su componente de footer de página.
Otra opción adicional a la anterior es usar la tienda Vuex, que conocerá el estado de los datos de la API. Cada componente puede tener acceso a la tienda. Esto le liberará de la necesidad de comunicar el estado de los datos obtenidos entre los componentes, o de escribir cualquier script que verifique el estado. Este parece un buen caso para el que se hizo Vuex.