El sistema de componentes

El Sistema de componentes de Vue es una parte importante ya que nos permite escribir nuestro propios elementos html.

Desde Vue tenemos 2 maneras de registrar los componentes:

• Global: pueden usarse en toda la aplicación.
• Local: indicamos donde y que componente queremos usar.

Para crear un componente existen varias formas, pero en nuestro ejemplo vamos a crear todo el componente en un único fichero.

Para comenzar, vamos a usar el fichero App.vue del ejemplo creado en la tercera parte de este curso.

En ese fichero esta toda la aplicación y como puedes comprobar es un bastante código, ya que la finalidad del mismo era entender como funciona Vue y que con poco conocimiento sobre el framework se pueden hacer bastantes cosas.

Esta forma de trabajar conlleva varios problemas asociados:

• Mantener y mejorar el código se convierte en una tarea bastante complicada.
• No se puede reutilizar para otras aplicaciones y/o partes de la aplicación.
• Cualquier cambio se convierte en un tarea que demanda mucho tiempo.
• Solucionar cualquier incidencia se convierte en un misión que en ocasiones lleva mas tiempo que un nuevo desarrollo.

Creando nuestros componentes

Para comenzar crearemos una carpeta dentro de src llamada components, y dentro de esa carpeta crearemos otras dos carpetas llamadas local y global.

Dentro de la carpeta global crearemos dos componentes, uno llamado filmLoading.vue y filmModal.vue.

filmModal.vue (aviso de errores genérico para toda la aplicación)

filmLoading.vue (Icono cargando para toda la aplicación)

La estructura de nuestros componentes como podemos ver, se divide en varias partes y no todas son obligatorias.

template: Aquí añadiremos todo el html y solo tendrán un único elemento padre.

script: Código Javascript

style: CSS

Con los ficheros anteriores (filmModal.vue y filmLoading.vue) hemos creado unos componentes y ahora veremos como registrarlos de forma global.

Dentro del fichero main.js importaremos los componentes y con vue.component registraremos de forma global.

Para finalizar vamos a usar nuestros componente en la aplicación y para ello crearemos una etiqueta en html con el nombre que usamos para registrar el componente.

Con esto ya tendríamos nuestro componente registrado de forma global y funcionando en cualquier parte de la aplicación.

Cuando necesitemos registrar y usar un componente de forma local, el proceso es mas sencillo.

Deberemos importar el fichero donde vayamos a usarlo y registrarlo dentro de nuestro components.

A continuación la evolución de nuestra aplicación.

App.vue

filmModal.vue

filmLoading.vue

filmCard.vue

filmCardDetail.vue

De momento se ha separado parte del código que estaba en App.vue para generar los componentes, pero no esta funcionando todo porque aun quedan conceptos por explicar y que se verán en las próximas entradas.