Intentemos comprender Vue(componentes). La estructura de un componente se compone en esencia de tres partes
Template
Es la plantilla del componente que posee formato html y donde inyectaremos las variables por una de las vías que Vue nos ofrece.
Clase
La clase es la zona javascript del componente, en ella creamos la variables y las propiedades que insertaremos en la zona html del componente
Estilos
Son los estilos css del componente, necesarios o no en dependencia de la estructura que demos al proyecto, ya que estos estilos también podrían ser asumidos por un archivo css externo.
El funcionamiento de un componente no es demasiado complejo, y relativamente fácil de comprender.
Tomemos el ejemplo que nos ofrece Vue por defecto: el componente HelloWorld.vue allí veremos definidas las tres partes con sus etiquetas de apertura y cierre, para template, script y style.
Si eliminemos ahora todo lo que está dentro de template, y solo dejemos la clase hello, para luego revisar en el navegador, veremos que ahora no hay nada ahí.
Vayamos a la clase encerrada dentro de script, ahí veremos que nombre de esa clase coincide con el nombre el componente, y que posee una propiedad, llamada msg, del tipo string, la misma que aparece en el template, entonces modifiquemosla, añadiendo una funcion data que nos devuelve una variable llamada bienvenida, con un texto adentro;
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data()
{
return {
bienvenida:"Estoy aqui"
}
}
}
</script>
Luego vamos a incluir esa nueva variable, dentro del template, siguiendo la estructura de las dos llaves que vimos antes.
<h3>{{ bienvenida }}</h3>
Revisemos ahora el navegador y veremos que nuestra nueva variable aparece allí con su mensaje.
Un elemento a tener en cuenta es, que un componente, se asigna siguiendo la estructura de nodos del DOM, y solo puede imprimirse en un nodo, por tanto no podríamos imprimir dos msg aunque los declaráramos en el script, a no ser que lo incluyéramos dentro de un div, o lo que es lo mismo no podemos escribirlo en dos etiquetas html
Construyendo un componente
Un componente es un archivo con extensión vue
Lo crearemos dentro de la carpeta components, lo llamaremos ComponenteNuevo.vue, y le daremos luego esta estructura:
<template>
<div id=”comp-nuevo”>
<h1> Nuevo componente de calculo </h1>
<h3> {{ subtitulo }} </h3>
</div>
</template>
<script>
export default{
name: "ComponenteNuevo",
data(){
return{
subtitulo: "Extraer duplicados"
}
}
}
</script>
Como puede verse, no definimos los estilos, solo el template y el código js:
Creamos un div con dos etiquetas dentro, donde el segundo de ellos contendrá el valor de la variable subtitulo creada dentro del script.
Dentro de la etiqueta script, además le asignamos el nombre, que en nuestro caso será el mismo que el componente.
Y ya hecho esto, nos quedará solo inscribir el componente recién creado dentro del archivo App.vue, dándole la url con la ruta.
Y luego insertándolo dentro del listado de componentes con que trabajamos.
Nuestro código queda así:
<script>
import HelloWorld from './components/HelloWorld.vue'
import ComponenteNuevo from './components/ComponenteNuevo.vue'
export default {
name: 'App',
components: {
HelloWorld
ComponenteNuevo
}
}
</script>
Hecho esto, para que se vea en la página, solo falta añadirlo dentro del div app en la zona del template :
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <ComponenteNuevo> </ComponenteNuevo> </div> </template>
</template>
Ahora ya el componente, que en este caso es solo texto será visible.
La condición para reutilizar este componente en otro lugar o dentro de otro componente, es traerlo mediante el import.
Supongamos que quisiéramos mosrarlo dentro del componente que trae Vue, por defecto: HelloWorld, podemos hacer esto:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3>{{ bienvenida }}</h3>
//insertamos el componente con un estilo css
<div style="background-color:#000;color:#fff">
<ComponenteNuevo></ComponenteNuevo>
</div>
</div>
</template>
<script>
//Importamos el componente para que pueda ser usado
import ComponenteNuevo from './ComponenteNuevo.vue'
export default {
name: 'HelloWorld',
//utilizamos la misma propiedad components que usa app.vue
components: {
ComponenteNuevo
},
props: {
msg: String
},
data()
{
return {
bienvenida:"Estoy aqui"
}
}
}
</script>
Finalmente entonces, sabemos que:
- Un componente consta de tres partes: template(html), script(js) y estilos(css)
- Que un componente es un trozo de código con funcionalidades, y que se alojará, en el DOM o la pantalla, en un nodo.
- Tiene un nombre, terminado con la extensión vue, y que este nombre será utilizado tanto para importarlo como para declararlo dentro del archivo central app.vue, y en aquel que se vaya a utilizar.
- Es reutilizable, y eso quiere decir que donde queramos usarlo debemos importarlo.
Espero que este pequeño articulo, le sirva de ayuda a alguien.
Y listo, esto es todo.
Espero modestamente que este artículo, sirva de ayuda a alguien.
Gracias.
…. hay que levantarse cada mañana con una esperanza y dormirse cada noche con una meta….