En esta parte del curso, vamos a comenzar a aprender sobre la creación y uso de componentes en Vue.js, uno de los features más poderosos de este framework de JavaScript. Para ello, empezaré creando un sencillo componente de icono, que simplemente va a permitir limpiar un poco nuestra plantilla de Vue, evitando la repetición del código HTML necesario para imprimir iconos en Bootstrap. Sin embargo, este conocimiento te servirá como una pequeña introducción a la creación de componentes más avanzados que veremos a partir de la lección siguiente.
Notas
Declaramos un componente de forma global llamado app-icon, donde colocaremos la plantilla para nuestros iconos y un atributo llamado img.
Vue.component('app-icon', {
template: '<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>',
props: ['img']
});
El atributo img lo pasaremos desde el HTML de la aplicación y servirá para definir el icono que queremos usar:
<app-icon img="ok"></app-icon>
Dentro de nuestro componente declaramos una computed property que nos permitirá definir las clases CSS que necesitamos para los diferentes iconos. El icono será dinámico dependiendo del valor de la propiedad img.
...
computed: {
cssClasses: function () {
return 'glyphicon glyphicon-'+this.img
}
}
Repasa la lección sobre el uso de computed properties
Como vamos a usar una computed property para definir la clase CSS del icono, tenemos que modificar la plantilla de nuestro componente app-icon para usar la directiva v-bind en su forma abreviada.
template: '<span :class="cssClasses" aria-hidden="true"></span>'
Repasa la lección sobre el uso de estilos dinámicos en Vue.js.
Al utilizar Vue.component(‘name’, { /* … */ }) definimos un componente de forma global, es decir, este componente podrá usarse en cualquier objeto VM de nuestra aplicación e incluso dentro de otros componentes (como veremos más adelante). Para aplicaciones de tamaño mediano o grande, se recomienda sin embargo registrar los componentes de forma local, esto lo veremos en la próxima parte de este curso.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Eliminar registros de un listado con Vue.js 2 Lección siguiente Representación de un registro como un componente en Vue.js 2