Los componentes puede que sea una de las características más potente de Vue.js, ya que nos permiten personalizar elementos HTML para aquel código que es recursivo dentro de la aplicación; como pueden ser elementos modales, filas de listados o tablas, etc.
En este aparatado aprenderemos a manejar componentes básicos en Vue.js dada su extensa versatilidad y utilidades que se le puede aplicar.
Registro de un componente
Lo primero que debes saber de un componente es que simplemente es una extensión de la instancia del objeto Vue. Es decir que si extiende de Vue, la manera de declarar un componente sería:
Vue.component(tag-name, options)
El tag-name es un string para darle una nomenclatura el nuevo elemento HTML y para una buena práctica, Vue recomienda que este nombre sea único, en minúscula y con guiones.
Cabe nombrar que las opciones que acepta un componente son las mismas que un objeto Vue, es decir, acepta data, methods, computed, watch con la excepción de que no acepta la opción el.
Este es un ejemplo completo, donde se observa que la declaración de los componentes debe ser anterior a la instancia del objeto Vue general:
See the Pen Components 1 by Jesús Chicano (@jesuschicano) on CodePen.
Como ves, en el componente se crean unas plantillas con código HTML, pero ojo: Si el template contiene varias líneas de código, Vue solo aceptará englobar el código con la comilla simple invertida (`).
data debe ser una función
Como ya he mencionado anteriormente, la opción del data que hasta ahora nos servía para declarar objetos o propiedades, en un componente hace las funcionalidades de una función.
En el ejemplo siguiente vemos que data trabaja como función devolviendo un contador a 0 y que cuando se pulsa en el botón que hemos creado en template, éste aumenta su valor en 1:
See the Pen Components 2 by Jesús Chicano (@jesuschicano) on CodePen.
Propieadades
Los componentes no son realmente necesarios si a estos no se les pasa una serie de datos que puedan ser mostrados. Las propiedades son atributos personalizados dentro del componente que reciben cualquier tipo de dato dentro del DOM.
En este ejemplo hemos creado un par de propiedades que son llamadas como atributos en el componente, y que además, le pasamos unas cadenas de texto:
See the Pen Components 3 by Jesús Chicano (@jesuschicano) on CodePen.
¿Qué ocurre si queremos darle alguna peculiaridad a un componente? Las plantillas del componente aceptan las directivas de Vue como si estuvieran en el código HTML.
Esto quiere decir, que si nosotros programamos un botón que cierre la caja al hacerle clic, podemos cambiarle una propiedad desde la función data():
See the Pen Components 3.5 by Jesús Chicano (@jesuschicano) on CodePen.
El mensaje se mostrará siempre que la directiva v-show sea verdadera, que en este caso, está contenido en la propiedad teVeo. La función data la devuelve como verdadera al principio, pero en la directiva click del botón, estamos cambiando la propiedad a falsa. Como resultado, al hacer clic, el mensaje desaparecerá.
Aquí dejo un ejemplo de cómo construir un modal con Bootstrap como componente.
See the Pen Components 4 by Jesús Chicano (@jesuschicano) on CodePen.
Eventos personalizados
Cada una de las instancias de Vue puede albergar la posibilidad de escuchar y emitir eventos. Todo se basa entre la comunicación entre padres e hijos.
Para la personalización de un método que escuche un evento concreto y realice una acción, la directiva v-on emite un comunicado al componente para que escuche y éste se comunique con un método de la instancia principal de Vue.
En este ejemplo, el componente tiene como plantilla una caja de texto (input) que al perder el foco ejecutará un método escuchador(). Existe un vínculo entre este método y el evento del DOM. Este evento va a llamar al método validarCupon de la instancia padre:
See the Pen Components 6 by Jesús Chicano (@jesuschicano) on CodePen.
Hasta ahora hemos aprendido un poco por encima cómo usar los componentes básicos en Vue.js. Ni que dedir tiene, que los componentes son mucho más complejos y nos brindan un campo de juegos increíblemente extenso. Pero como primeros pasos de introducción hacia el mundo de los componentes, será más que suficiente.