TypeScript / Vue – Componentes hijos y props

Bienvenidos sean a este post, hoy continuaremos con los componentes de vue.

En el post anterior hablamos un poco sobre la estructura de un componente pero hoy nos centraremos en dos temas como son: Los componentes hijos para ser utilizados desde el principal y las propiedades o props. En realidad un tema va relacionado con el otro porque las propiedades por lo general es recomendable que se carguen desde otro archivo y este sera un componente hijo que importaremos desde el principal. Para entender este concepto vamos a crear un nuevo ejemplo, ejecuten el siguiente comando:

$ vue create ejemplo03

Este iniciara el proceso de creacion, sino vienen de los posts anteriores y no poseen el perfil con las opciones para nuestros proyectos deben elegir la opcion manual y elegir las siguientes opciones:

1. typescript (solamente)
2. 3.x
3. Use class-style component syntax? yes
4. Use babel alongside? no
5. dedicated config files
6. Save this as a preset for future projects? yes

Con nuestra aplicacion creada lo primero que haremos sera ingresar al directorio y dentro del directorio src crearemos un nuevo archivo con el nombre e Hola.vue y le agregaremos el siguiente codigo:

src/Hola.vue

<template>
        <p>Hola Vue!</p>
        <p>msj prop = {{ msj }}</p>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
        props: {
                msj: String
        }
})
export default class Hola extends Vue {
        msj!: string;
}
</script>

<style scoped></style>

Como vimos en el post anterior siempre se compondran de tres partes. El template sera lo que se renderizara o mostrara en la pagina. Para este caso mostraremos un mensaje prrimero y luego otro pero con la particularidad de que contendra el texto de una propiedad o props. La siguiente parte sera el script donde estara el codigo, recuerden que le pasamos codigo de tipo typescript (ts), y en el bloque importaremos primero el modulo para las opciones (Options) y el de Vue para convertirla la clase de este archivo en un componente de vue. Options es lo que se llama habitualmente un decorador y en este lo usaremos para establecer a las props que podremos intercambiar entre los distintos componentes. Para nuestro ejemplo sera de uno solo y este sera el que pasamos en el template y le diremos que es de tipo String. Por ultimo teenemos a la clase que usaremos para poder acceder y sera el componente de vue y aqui tendremos una propiedad que es la del decorador y tendra el operador de opcional. Y finalmente, tenemos la parte encargada del estilo y tiene la palabra scoped para que afecte unicamente a este componente, de lo contrario afecta a toda la pagina. Nuestro siguiente paso sera modificar el codigo de App.vue de la siguiente manera:

src/App.vue

<template>
        <Hola msj="msj desde App.vue"></Hola>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import Hola from './Hola.vue';

@Options({
  components: {
    Hola,
  },
})
export default class App extends Vue {}
</script>

<style scoped></style>

De vuelta tenemos a las tres partes, en el caso del template tenemos al componente que creamos anteriormente y observen que usamos a la prop msj y le pasamos un texto. En la seccion de script tenemos la misma importacion que en Hola.vue, Options y Vue, y luego importamos el componente del archivo anteriormente creado. Volvemos a usar al decorador Options para definir los componentes que cargaremos al momento que sea creado App en el archivo final. En este caso solo pasamos a Hola, y luego exportamos esta clase como Componente de vue. Volvemos a establecer el mismo estilo que en el archivo anterior. Con todas estas modificaciones realizadas nuestra aplicacion se vera de la siguiente manera:

Lo que mas nos interesa es la segunda linea donde mostramos el mensaje que pasamos como propiedad, msj, y se ve reflejado. Con esto no solo hemos integrado un componente hijo sino que a su vez hemos trabajado con una propiedad de este. De esta forma podemos integrar todos los componentes hijos que sean necesarios, asi como todas las propiedades que necesitemos.

En resumen, hoy hemos visto componentes hijos y propiedades, que son, para que sirven, como se implementan mediante un ejemplo simple. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.