Componentes dinámicos de VueJS

Otra característica realmente interesante de VueJS son los componentes dinámicos. ¿Cuáles son los componentes dinámicos que preguntas? Bueno, digamos que tiene un componente principal y le gustaría cargar dinámicamente otros componentes en la plantilla principal haciendo clic en un botón o por algún otro medio. Esto es lo que se puede lograr con componentes dinámicos. En este tutorial, crearemos algunos componentes dinámicos en Vue y los probaremos en una demostración en vivo. Comencemos con componentes dinámicos en VueJS.

Cree tres componentes

Para comenzar, solo agregaremos tres componentes simples a nuestra aplicación. Solo por brevedad, los llamaremos OneComponent.vue, TwoComponent.vue y ThreeComponent.vue. Se ubicarán en la carpeta de componentes de la aplicación.
tres componentes vue

Aquí está el marcado que colocaremos en estos tres componentes diferentes. Son súper básicos, pero lo suficientemente diferentes para que podamos diferenciar fácilmente entre los componentes cuando se rendericen.
OneComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <div class="card m-3" style="width: 25rem;">
            <div class="card-body">
                <h5 class="card-title">Number 1</h5>
                <p class="card-text">I'm number one!</p>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {}
</script>
 
<style scoped>
    div.card {
        color: #856404;
        border: 4px solid #ffeeba;
    }
</style> 

TwoComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <div class="card m-3" style="width: 25rem;">
            <div class="card-body">
                <h5 class="card-title">Number 2</h5>
                <p class="card-text">I'm number two!</p>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {}
</script>
 
<style scoped>
    div.card {
        color: #004085;
        border: 4px solid #b8daff;
    }
</style>

ThreeComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <div class="card m-3" style="width: 25rem;">
            <div class="card-body">
                <h5 class="card-title">Number 3</h5>
                <p class="card-text">I'm number three!</p>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {}
</script>
 
<style scoped>
    div.card {
        color: #721c24;
        border: 4px solid #f5c6cb;
    }
</style>

Configurar App.vue

Ahora queremos hacer uso dinámico de estos diversos componentes en nuestro archivo principal App.vue. Hay algunos pasos para que esto funcione. Primero, importemos esos componentes y los registremos localmente como tal.
App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <div>
 
    </div>
</template>
 
<script>
    import One from './components/OneComponent.vue';
    import Two from './components/TwoComponent.vue';
    import Three from './components/ThreeComponent.vue';
 
    export default {
        components: {One, Two, Three},
 
        data() {
 
        }
    }
</script>

Presentamos <componente>

Ahora queremos hacer uso de esos componentes, pero ¿cómo lo hacemos de forma dinámica? Normalmente ahora haríamos uso del selector que corresponde al componente particular que nos gustaría renderizar. No vamos a seguir ese camino. En su lugar, usaremos un selector especial en VueJS llamado <componente> . Veamos eso en acción aquí.
App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <div class="d-flex justify-content-center">
            <component :is="selectedComponent"></component>
        </div>
    </div>
</template>
 
<script>
    import One from './components/OneComponent.vue';
    import Two from './components/TwoComponent.vue';
    import Three from './components/ThreeComponent.vue';
 
    export default {
        components: {One, Two, Three},
 
        data() {
            return {
                selectedComponent: 'One'
            }
        }
    }
</script>

En el fragmento de arriba, puede ver que ahora tenemos esa etiqueta <component> en la sección de plantilla del componente principal. Una cosa especial a tener en cuenta es el uso de la is encuadernación. Básicamente, lo que está sucediendo aquí es que este <componente> está vinculado a una instancia de un componente. Observe que en el método data () tenemos una propiedad de selectedComponent que tiene un valor predeterminado de 'One'. ¿Qué crees que veremos en el navegador en este momento? Así es, el componente 'Uno' se representa como vemos aquí.
un componente dinámico

Seleccionar componentes dinámicamente

Eso estuvo muy bien. Ahora estamos renderizando un componente en un componente usando eletiqueta en lugar de la etiqueta personalizada del componente en sí. El componente a renderizar está determinado por una propiedad en el método data (). Ahora, agreguemos una nueva característica. Queremos poder cargar dinámicamente cada componente en la plantilla del App.vue principal. ¿Cómo podemos hacer esto? Considere este nuevo marcado.
App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
    <div>
        <div class="d-flex justify-content-center">
            <div @click="selectedComponent = 'One'" class="p-2 m-2 btn btn-primary">One</div>
            <div @click="selectedComponent = 'Two'" class="p-2 m-2 btn btn-primary">Two</div>
            <div @click="selectedComponent = 'Three'" class="p-2 m-2 btn btn-primary">Three</div>
        </div>
        <div class="d-flex justify-content-center">
            <component :is="selectedComponent"></component>
        </div>
    </div>
</template>
 
<script>
    import One from './components/OneComponent.vue';
    import Two from './components/TwoComponent.vue';
    import Three from './components/ThreeComponent.vue';
 
    export default {
        components: {One, Two, Three},
 
        data() {
            return {
                selectedComponent: 'One'
            }
        }
    }
</script>

Ahora hemos agregado tres nuevos botones. En realidad son divs pero parecen botones gracias a las clases bootstrap que hemos aplicado. Observe que en cada botón hay un controlador @click. Todo lo que hacemos en ese controlador de clic es establecer la selectedComponentpropiedad en un nuevo valor de cadena que representa el componente que nos gustaría cargar dinámicamente. Pruébelo usted mismo aquí.

¡Eso es genial! Al hacer clic en cada botón, Vue carga dinámicamente un componente completamente nuevo en la plantilla. Esta es una demostración realmente básica, pero puede usar su imaginación y probablemente idear algunos casos de uso realmente interesantes para dicha característica.

Manejo del estado en componentes dinámicos

Una pregunta que podríamos hacernos es ¿qué sucede cuando un componente se carga dinámicamente en Vue? Cuando carga un componente diferente, ¿caduca el primero o se mantiene vivo? Intentemos agregar algunos datos al ThreeComponent y veamos cómo funciona.
ThreeComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
    <div>
        <div class="card m-3" style="width: 25rem;">
            <div class="card-body">
                <h5 class="card-title">Number 3</h5>
                <p class="card-text">I'm number three!</p>
                <button @click="counter++" class="btn">Click!</button>
                <p class="card-text">Button has been clicked <b>{{ counter }}</b> times</p>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {counter: 0}
        }
    }
</script>
 
<style scoped>
    div.card {
        color: #721c24;
        border: 4px solid #f5c6cb;
    }
</style>

En el fragmento de arriba, simplemente agregamos una counterpropiedad a los datos () y luego en la plantilla incrementamos ese contador cuando se hace clic en un botón. También mostramos el número de veces que se ha hecho clic en el botón. Tenga en cuenta que cuando cambia entre componentes, el recuento se restablece. ¿Qué significa esto? Parece que cada vez que carga un componente dinámico, es una nueva instancia. Si navega fuera o carga un componente diferente, el componente actualmente renderizado se destruirá.
estado del componente dinámico

Presentamos <keep-alive>

Tal vez le gustaría que un componente mantenga su estado si navega y vuelve al mismo componente. Esto es fácil de hacer usando la etiqueta especial <keep-alive> que proporciona VueJs. Todo lo que tenemos que hacer es envolver la etiqueta especial <component> en App.vue con la etiqueta <keep-alive> como vemos aquí.
App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
    <div>
        <div class="d-flex justify-content-center">
            <div @click="selectedComponent = 'One'" class="p-2 m-2 btn btn-primary">One</div>
            <div @click="selectedComponent = 'Two'" class="p-2 m-2 btn btn-primary">Two</div>
            <div @click="selectedComponent = 'Three'" class="p-2 m-2 btn btn-primary">Three</div>
        </div>
        <div class="d-flex justify-content-center">
            <keep-alive>
                <component :is="selectedComponent"></component>
            </keep-alive>
        </div>
    </div>
</template>
 
<script>
    import One from './components/OneComponent.vue';
    import Two from './components/TwoComponent.vue';
    import Three from './components/ThreeComponent.vue';
 
    export default {
        components: {One, Two, Three},
 
        data() {
            return {
                selectedComponent: 'One'
            }
        }
    }
</script>

Con esa actualización, siga adelante y pruebe la nueva demostración que mantiene el estado.

Ganchos de ciclo de vida

Si no está utilizando <keep-alive>, tiene acceso a un enlace de ciclo de vida destrozado (), y se activa cada vez que navega fuera de un componente dinámico de vue cargado. ¿Qué pasa cuando estás usando <keep-alive>? En ese caso, tiene acceso a dos ganchos de ciclo de vida de activado () y desactivado (). Estos se dispararán cuando el componente dinámico se cargue (active) o se aleje de (desactivado). Podemos probar esto agregándolos a ThreeComponent.vue y simplemente cerrar la sesión de los resultados.
ThreeComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
    <div>
        <div class="card m-3" style="width: 25rem;">
            <div class="card-body">
                <h5 class="card-title">Number 3</h5>
                <p class="card-text">I'm number three!</p>
                <button @click="counter++" class="btn">Click!</button>
                <p class="card-text">Button has been clicked <b>{{ counter }}</b> times</p>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {counter: 0}
        },
 
        deactivated() {
            console.log('Deactivated!')
        },
 
        activated() {
            console.log('Activated!')
        }
    }
</script>
 
<style scoped>
    div.card {
        color: #721c24;
        border: 4px solid #f5c6cb;
    }
</style>

Ahora vemos que podemos aprovechar esos ganchos del ciclo de vida si es necesario.
ganchos de ciclo de vida activados desactivados

Resumen de componentes dinámicos de VueJS

En este tutorial, aprendimos cómo puede usar el mismo punto de montaje y cambiar dinámicamente entre varios componentes usando la etiqueta especial <component> y vincularse dinámicamente a su isatributo. ¡Es una característica realmente interesante que definitivamente podría aprovechar! Además, aprendimos cómo se crean y destruyen los componentes durante este proceso, así como la idea de mantener activos los componentes si es necesario mantener el estado.

Header Ads Widget

Componentes dinámicos de VueJS

Cree tres componentes

Configurar App.vue

Presentamos <componente>

Seleccionar componentes dinámicamente

Manejo del estado en componentes dinámicos

Presentamos <keep-alive>

Ganchos de ciclo de vida

Resumen de componentes dinámicos de VueJS

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget