Introducción a los componente en Vue.js

En esta lección del Curso de Vue.js, mejoraremos el código relacionado con el ejercicio de la lección anterior. Conocerás sobre los componentes de Vue.js que permiten encapsular código reusable, el cual es una de las características más poderosas de este framework. También por supuesto aprenderás a crear tus propios componentes con Vue.

Repositorio

Ver el código de esta lección en GitHub

Notas

Para declarar un componente de forma global se hace dentro de un bloque de JavaScript, donde usamos el método Vue.component() que recibe dos parámetros: el nombre del componente y un objeto JavaScript con las opciones, de la siguiente manera:
```
Vue.component('hello-world', {
    template: '<h2>Hello world!</h2>'
});
```
Recuerda agregar el elemento creado tag en el HTML para que pueda ser visualizado el mensaje:
```
<hello-world></hello-world>
```
Las otras dos maneras de declarar un template para un componente, aparte de hacerlo dentro de éste, son:
- Usando una etiqueta script definiendo type=text/template y un identificador id para hacer referencia en el componente.
- Creando una etiqueta template e igualmente asignarle un id para referenciarlo posteriormente.
Cuando el componente creado usa propiedades debemos declararlas de manera explícita en el atributo props dentro del objeto de opciones del componente, bien sea como un array o como un objeto JavaScript:
- Como un array:
```
props: ['name', 'gender']
```
- Como un objeto, validando los datos que se están recibiendo en el componente:
```
props: {
    gender: {type: String, required:false, default:'m'},
    name: {type: String, required:true}
}
```
Podemos usar v-bind para enlazar aquellas propiedades del componente que queremos manejar dinámicamente.
Como Vue.js sincroniza en una sola dirección (one-way-down) desde el padre al hijo, es decir, que si se actualiza una propiedad padre, se actualizará también el hijo, pero no viceversa. Para solucionar esto y forzar que se use two-way-binding debemos agregar el modificador .sync:
```
:years.sync="years_php"
```

¿Alguna pregunta o duda? Puedes hacerla en la sección de comentarios y no olvides compartir esta lección para que otros puedan aprender sobre este fantástico framework.