Composición con Componentes

El sistema de componentes es otro concepto importante en Vue, porque es una abstracción que
nos permite crear aplicaciones a gran escala compuestas de componentes pequeños,
independientes y, a menudo, reutilizables. Si lo pensamos, casi cualquier tipo de interfaz de
aplicación se puede abstraer en un árbol de componentes.

En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas.

Registrar un componente en Vue es sencillo:
// Define un nuevo componente llamado todo-item
Vue.component('todo-item', {
template: '<li>Esta es una tarea.</li>'
})

Ahora puedes incluirlo en el template de otro componente:

<ol>
<!-- Crea una instancia del componente todo-item -->
<todo-item></todo-item>
</ol>

Pero esto supondría tener el mismo texto para cada tarea, que no es muy interesante. Es posible
que se pueda pasar datos de un scope o contexto padre a uno secundario en los componentes
hijos. Modifique la configuración del componente para que acepte una propiedad:
Vue.component('todo-item', {
// El componente todo-item ahora acepta una
// "propiedad", que es como un atributo personalizado.
// Esta propiedad es llamada todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

Ahora podemos pasar la tarea a cada componente repetido usando v-bind:

<div id="app-7">
<ol>
 <!--
Ahora proporcionamos a cada todo-item con el objeto todo
que representa, para que su contenido pueda ser dinámico.
También necesitamos proporcionar a cada componente con una "clave",
que vamos a explicar más adelante.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({

el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetales' },
{ id: 1, text: 'Queso' },
{ id: 2, text: 'Cualquier otra cosa que se supone que los humanos coman'
}
]
}
})

1. Vegetales
2. Queso
3. Cualquier otra cosa que se supone que los humanos coman

Este es un ejemplo ficticio, pero hemos logrado separar nuestra aplicación en dos unidades más
pequeñas, y el componente hijo está razonablemente bien desacoplado del componente padre a
 través de la interfaz de propiedades. Ahora podemos mejorar aún más nuestro componente <todo-
item> con un template y lógica más complejas sin afectar la aplicación principal.

En una aplicación grande, es necesario dividir toda la aplicación en componentes para que el
desarrollo sea manejable. Hablaremos mucho más sobre los componentes más adelante en la
guía, pero aquí hay un ejemplo (imaginario) de cómo se vería el template de una aplicación con
componentes:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>

Relación con Elementos Personalizados

Es posible que haya notado que los componentes de Vue son muy similares a Elementos
personalizados, que forman parte de las Especificaciones de Componentes Web. Esto se debe
a que la sintaxis de los componentes de Vue está modelada de forma flexible según la
especificación. Por ejemplo, los componentes de Vue implementan la API de Slot y el atributo
especial is. Sin embargo, hay algunas diferencias clave:

1. La especificación de componentes web se ha finalizado, pero no se implementa de forma nativa en

todos los navegadores. Safari 10.1+, Chrome 54+ y Firefox 63+ soportan de forma nativa los
componentes web. En comparación, los componentes de Vue no requieren polyfills y funcionan de
manera consistente en todos los navegadores compatibles (IE9 y superiores). Cuando sea
necesario, los componentes de Vue también se pueden envolver dentro de un elemento
personalizado nativo.

2. Los componentes de Vue proporcionan características importantes que no están disponibles en

elementos personalizados sencillos, especialmente el flujo de datos de componentes cruzados, la
comunicación de eventos personalizados y las integraciones de herramientas de construcción.