VueJS – crear componentes en vue

Cómo crear componentes en vue js

Hoy vamos a crear componentes en vue y de pasó vamos a repasar algunos atributos elementales cómo vimos en el post anterior.

Componentes en vuejs

Un componente, es un pedazo de código que se puede reutilizar en varias secciones de nuestra página web, este concepto se usa mucho en framework cómo Vuejs, Angular o React entre otros.

En resumen vamos a hacer plantillas para no hacerlo 2 veces o más en nuestra web, esto hace que también la carga sean menores.

Cómo podemos crear componentes en vue

para crear un componente en vue es muy sencillo, lo que tenemos que hacer es declararlo en nuestro js y ponerle un template, pero hay 2 formas de hacerlo

Declararlo en un objeto

una de las facilidades es que podemos crear componente solo especificando en un objeto como quiere que se llame y el template que llevará por ejemplo

var tabs = [{
        name: 'Inicio',
        componente: {
            template: '<div>Componente Inicio</div>'
        }
    },
    {
        name: 'Resultados',
        componente: {
            template: '<div>Componente resultado</div>'
        }
    },
    {
        name: 'Archivos',
        componente: {
            template: '<div>Componente archivos</div>',
        }
    }
]

new Vue({
    el: '#app',
    data: {
        tabs: tabs,
        actualTab: tabs[0]
    }
})

y el html se ve así

<html>
<head>
    <title>Prueba 1</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }
        
        .tab-button:hover {
            background: #e0e0e0;
        }
        
        .tab-button.active {
            background: #e0e0e0;
        }
        
        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app" class="demo">
        <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: actualTab.name === tab.name }]" v-on:click="actualTab = tab">{{ tab.name }}</button>
        <componente v-bind:is="actualTab.componente" class="tab"></componente>
    </div>
    <script src="./assets/js/componentes.js"></script>
</body>
</html>

el resultado es esta tabla

Analizando el código

lo primero que vemos es el javascript, tenemos un estructura donde declaramos que nuestro component se llamará componente

{
name:’Inicio’,
componente: {
template:'<div>Componente Inicio</div>’
}

y por eso lo podemos llamar en el html <componente>

En los botones esta es la siguiente explicación

  • v-for = for para poner los botones dependiendo nuestras tabs
  • v-bind:key = es un identificador interno
  • v-bind:class = es la forma de agregar clases de css dinamicas
  • v-on:click = cambiamos la propiedad actualTab para cargar los componentes nuevos

para la etiqueta <componente>

  • v-bind:is = inserta el template deseado en nuestro componente

Esta forma es la más sencilla de hacer nuestras páginas para que nuestra página web nunca refresque.

Declarar un componente con vue

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

y el html sería el siguiente

<html>
<head>
    <title>Prueba 2</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app" class="demo">
<blog-post title="Hola a todos"></blog-post>
 </div>
    <script src="./assets/js/componentes.js"></script>
</body>

</html>

Explicacion

con esta forma podemos declarar varios componentes separados y usar las etiquetas en cualquier parte, esto sirve para hacer mas template de secciones.

Si desean un poco más de dificultad podemos ver este código donde es parecido a los ejemplo anterior pero con mas informacion y mas estilo y para nuestro siguiente post vamos a profundizar un poco más

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.