es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede montar dos veces el mismo componente Vue 3.

18 Jul, 2023 Programación

Estoy montando un componente Vue 3 como una animación de carga durante la carga de un marco con:

createApp(App).mount(e);

Cuando se carga el marco, el componente se borra del HTML por el contenido del marco (pero creo que no por parte de Vue). Este comportamiento está gestionado por un sistema externo de Vue.

Cuando intento volver a cargar el componente con el mismo comando, el componente no se muestra.

Si solo monto nuevamente el componente, obtengo el siguiente aviso en la consola y el componente no se muestra:

"[Vue warn]: App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. `const createMyApp = () => createApp(App)`".

También encontré una forma de replicar el problema con:

const app = createApp(App)
app.mount(el);
el.innerHtml = '';
app.mount(el);

También intenté desmontar el componente sin éxito:

const app = createApp(App);
app.mount(el);
app.unmount();
app.mount(el);

Entonces, ¿cuál es la forma correcta de mostrar nuevamente el mismo componente vue cuando se borra externamente?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La forma correcta de volver a mostrar el mismo componente Vue cuando se borra externamente es crear una nueva instancia de la aplicación y montarla en el mismo elemento. Esto se puede lograr mediante la creación de una función de fábrica que retorna una instancia nueva de la aplicación:

    const createAppInstance = () => {
   return createApp(App);
}

// Inicializar la instancia de la aplicación
let app = createAppInstance();
app.mount(el);

// Cuando el componente es borrado externamente, crear una nueva instancia de la aplicación
app = createAppInstance();
app.mount(el);

    Alternativamente, también se puede utilizar la función render del componente para renderizarlo manualmente, en lugar de depender del montaje de la aplicación:

    const app = createApp(App);
const component = app.mount(el);

// Cuando el componente es borrado externamente, renderizarlo manualmente nuevamente
const loadingComponent = h(App);
loadingComponent.$el = el;
component.$el.parentNode.replaceChild(loadingComponent.$el, component.$el);
loadingComponent.$mount();

    Este enfoque requiere código adicional, pero brinda más control sobre el proceso de renderización.

Comments are closed.