Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En esta entrada vamos a ver cómo podemos hacer la carga de Componentes dinámicos en Vue.js 2, la idea es poder cargar componentes dentro de otros componentes pero de forma dinámica.

Para nuestro ejemplo tendremos dos botones, y al pulsar en cada uno de ellos cargará un determinado componente.

A continuación tienes el ejemplo que vamos a desarrollar.



Lo único que necesitamos hacer es crear un componente desde donde importemos y utilicemos otros componentes haciendo uso de component.

El código anterior es completamente funcional, con component y v-bind:is le decimos el componente que debe ser cargado, así de sencillo.

Componentes dinámicos en Vue.js 2 con transiciones

Si además de cargar componentes dinámicos también queremos que carguen utilizando transiciones, que puede ser lo más lógico, entonces podemos utilizar transition de la siguiente forma.

Lo único que necesitamos saber es que el atributo name hace referencia al inicio del nombre de la clase que estamos utilizando, y que las clases utilizadas son las 3 que vemos ya que están previamente definidas por Vue.