Creamos muchos componentes en nuestras aplicaciones VueJS, pero una de las cosas a tener es si vamos a utilizarlos en más de una ocasión, de ser así, debemos desarrollarlos de tal forma que se adapte a cualquier aplicación que desarrollemos.
En este artículo crearemos un botón, que creo que es un buen ejemplo como primer componente reusable y también aprenderemos a añadirle un prop, propiedades que harán dínamico nuestro componente.
En la carpeta donde guardemos nuestros componentes (en mi caso components), crearemos Button.vue. La estructura básica de nuestro componente sería:
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>Vamos a comenzar creando las clases que tendrá nuestro componente. Antes de nada, añadiremos dentro de la etiqueta style «scroped», que hará que este css solo afecte al botón y a nada más de la aplicación.
<style scoped>Y crearemos 3 clases ( y sus respectivos hover)
La primera clase será la que llevará el botón siempre:
.btn{
padding:10px 30px;
border:none;
border-radius: 5px;
color:white;
cursor:pointer;
font-weight: 700;
letter-spacing: 2px;
transition:.3s;
}La segunda, la llamaremos outline, que dará un borde y un color a nuestro botón:
.outline{
background-color:transparent;
border: 2px solid #FF8D00;
color:#FF8D00;
}
.outline:hover{
background-color: #FF8D00;
color:white;
}Y la tercera y última, la llamaremos outline-secondary, será igual que outline pero con otros colores:
.outline-secondary{
background-color:transparent;
border:2px solid #8388A4;
color:#8388A4;
}
.outline-secondary:hover{
background-color:#8388A4;
color:#32364F;
}Ya tendríamos los estilos de nuestro botón reusable, ahora iremos a la lógica de nuestro componente, al script.
– Añadiremos un name al componente, para después declararlo en nuestra aplicación.
– Declararemos un prop llamado type, que será de tipo String y por defecto su valor será outline.
– Crearemos una propiedad computada, que llamaremos selectedStyle, que será la encargada de comprobar el prop y retornar la clase que se pide.
<script>
export default {
name: "Button",
props: {
//Type control style
type: {
type:String,
default:"default"
},
},
computed:{
selectedStyle(){
switch (this.type) {
case "outline":
return "outline"
case "outline-secondary":
return "outline-secondary"
default:
return "outline";
}
}
}
}
</script>Y por último, en el apartado de template crearemos un botón que tendrá:
– Le añadiremos, como dijimos anteriormente, la clase btn que será estática en nuestro componente (nunca variará).
– le añadiremos :class=»selectedStyle», que añadirá la clase que la propiedad computada retorne (Para saber más de las propiedades computadas, visita nuestro artículo: Propiedades computadas en Vuejs)
– Y entre las etiquetas de nuestro botón, añadiremos <slot>ejemplo</slot>, que será el texto que se muestre por defecto en el caso que no le añadamos nada a nuestro botón.
<template>
<button class="btn" :class="selectedStyle">
<slot>Button</slot>
</button>
</template>Por último, declararemos el botón dónde tengamos inicializado Vue, en mi caso en main.js:
import Button from '@/components/Button'
Vue.component('button-custom', Button);
//button-custom hará referencia al nombre de la etiqueta de nuestro componente
Y ahora, ya podríamos comenzar a llamar a nuestro botón en nuestra aplicación:
<button-custom class type="outline">Enviar</button-custom>
<button-custom type="outline-secondary">Enviar</button-custom>Y este sería el resultado:
De esta forma tan sencilla, hemos aprendido a crear componentes reusable. Gracias a los props, podemos adaptar componentes a cualquier parte de la aplicación e incluso llevarnoslos a otros proyectos.