Manejo de Componentes en Vue.js

El manejo de componentes en Vue puede ser un tema ignorado en algunos casos, y por lo tanto poco conocido. Trabajar a base de componentes nos proporciona un espacio de trabajo bastante ordenado, similar al motor de plantillas de Blade en laravel, con algunas diferencias claro esta. La principal diferencia esta en el manejo y envio de la información o cambios, entre los componentes y la instancia vue, se pueden presentar 4 casos:

  • Caso 1: Componente A editado desde elementos pertenecientes al mismo componente
  • Caso 2: Elementos de Componente A, editados desde elementos pertenecientes a la instancia Vue
  • Caso 3: Elementos de Componente A, editados desde elementos De otro componente B
  • Caso 4: Elementos pertenecientes a la instancia Vue, editados por elementos de componente B

lustremos un poco.

Todos quieren cambiar el grafico

  • El botón que pertenece a la instancia principal del vue
  • El botón que pertenece al componente A
  • El botón que pertenece al componente B

Si usamos el Framework iview que trabaja a base de componentes, es probable que queramos modificar algunos datos de ellos, u obtener alguna información de los mismos, por ello es importante conocer acerca del manejo de componentes en Vue.

Antes de comenzar conozcamos la manera de trabajar:

  • Crearemos un componente para cada caso (en algunos casos requerirá varios componentes )
  • Crearemos un archivo de instanciacion Vue para cada caso (esto se debe agregar al compilador de laravel mix)

  • Crearemos una vista con el motor de plantillas de Blade para cada caso, en la que se incluirá el assets compilado a cada caso

 

Habiendo comprendido esto, veamos el primer Caso

Caso 1: Componente A editado desde elementos pertenecientes al mismo componente

 

Esto es lo mas sencillo, y lo aplicamos a menudo, cuando modificamos cualquier elemento desde la instancia vue, se aplica de la misma manera a los elementos que están dentro de un componente, Veamos un ejemplo.

Utilicemos un componente ColorPicker de iview https://www.iviewui.com/components/color-picker

Repositorio del Proyecto: https://github.com/brogramador/Componentes_Vue 

El codigo Respectivo a los archivos: Componente, Instanciacion y Vista 

Componente: Color_caso1.vue

Instanciacion: app_caso1.js

Vista: Caso1.blade.php

 

Caso 2: Elementos de Componente A, editados desde elementos pertenecientes a la instancia Vue

El codigo Respectivo a los archivos: Componente, Instanciacion y Vista 

Repositorio del Proyecto: https://github.com/brogramador/Componentes_Vue 

Componente: Color_caso2.vue

Instanciacion: app_caso2.js

Vista: Caso2.blade.php

Caso 3: Elementos de Componente A, editados desde elementos De otro componente B

Repositorio del Proyecto: https://github.com/brogramador/Componentes_Vue 

Componente: Color_caso3.vue

Componente: ComponenteB.vue

Instanciacion: app_caso3.js

Vista: Caso3.blade.php

Caso 4: Elementos pertenecientes a la instancia Vue, editados por elementos de componente B

Repositorio del Proyecto: https://github.com/brogramador/Componentes_Vue 

Componente: ComponenteB.vue

 

Instanciacion: app_caso4.js

 

Vista: Caso4.blade.php

con esta información podrás trabajar en Vue a base de componentes, de igual manera podrás usar iview en tus proyectos Vue, no olvides seguirnos en Facebook para conocer al instante los contenidos.

Repositorio del Proyecto: https://github.com/brogramador/Componentes_Vue 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *