Tengo un componente de alerta que creé... Como ejemplo <AlertComponent message="message" />
Tengo un método en mi App.vue principal que aceptará un nuevo objeto de mensaje entrante y me gustaría crear un AlertComponent y agregarlo al DOM cuando llegue el mensaje. Esto se debe a que puedo tener 1 mensaje o 5 mensajes, así que Quiero crear un componente dinámicamente porque una vez que se haya agregado el Componente, se mostrará durante 5 segundos y luego se eliminará de la vista.
No tengo claro cómo agregar un componente dinámicamente a App.vue dinámicamente. Mi idea sería tener un div en mi plantilla al que simplemente pueda "agregar un niño" o algo así.
¿Cuál es la forma Vuejs recomendada de hacer esto? No quería usar un v-for en un componente de alerta porque cada vez que llega un mensaje nuevo, tendría que administrar una serie de ellos y estoy seguro de que terminaría con problemas con el enlace de datos redibujando un componente que yo Ya se ha mostrado en la pantalla antes de que tenga la oportunidad de destruirse a sí mismo.
Estoy investigando esto para un sitio basado en go. Un par de posibilidades:
Puede usar Petit Vue , que es una versión pequeña de Vue 3 que está diseñada para esto. Supongo que su componente no es muy grande; si es así, esta podría ser una buena opción para ti. Simplemente cargue el código Vue desde un CDN y puede colocar el código de su componente directamente en el Javascript de su página. Es bastante simple.
Si quiere hacer algo más grande, quiere compilar Vue (estoy usando la versión más nueva, que se compila con el nuevo sistema de compilación Vite), y necesita obtener de alguna manera los paquetes de CSS y Javascript que crea para cargarlos en su paginas Puedo explicar cómo hacer esto con más detalle si realmente quieres probarlo. No creo que haya un buen tutorial para señalarte.
Si usa uno de los sistemas enumerados aquí , puede usar su plataforma para hacer la magia que necesita hacer para (2). Creo que Ruby on Rails, Wordpress, Drupal y algunas otras plataformas populares tienen esto.
puede intentar usar v-if, pero también puede intentar crear una nueva aplicación dentro de la suya simplemente con createApp(App).mount("#app");