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