Creando componentes reusables en VueJS

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:

Estructura del componente reusable.

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

Añadiendo el estilo

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;
    }

Lógica de nuestro componente

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>

Template

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>

Declarando nuestro componente

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 

Utilizando el botón reusable

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.

;