Hasta ahora hemos probado de definir componentes y que dependan directamente de la instancia Vue. Veremos que una componente puede definir en su 'template' otras componentes.
Declarar dos componentes: 'listado-articulos' e 'item-articulo'. La componente 'item-articulo' tiene por objetivo mostrar el código, descripción y precio de un único artículo.
La componente 'listado-articulos' debe definir en su template una instancia de la componente 'item-articulo'. Es decir la componente padre es 'listado-articulos' y la componente hija es 'item-articulo'.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<listado-articulos v-bind:articulos="articulos"></listado-articulos>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('listado-articulos', {
props: ['articulos'],
template: `<div>
<item-articulo v-for="art in articulos" v-bind:articulo="art"></item-articulo>
</div>`
})
Vue.component('item-articulo', {
props: ['articulo'],
template: `<div>
<p>Código:{{articulo.codigo}}</p>
<p>Descripción:{{articulo.descripcion}}</p>
<p>Precio:{{articulo.precio}}</p><hr>
</div>`
})
var app=new Vue({
el: '#aplicacion',
data:{
articulos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
})
</script>
</body>
</html>
La componente 'listado-articulos' recibe en la propiedad 'articulos' el objeto con todo los artículos a mostrar. Luego en el template definimos una etiqueta 'item-articulo' y mediante una directiva v-for recorremos el objeto de articulos:
Vue.component('listado-articulos', {
props: ['articulos'],
template: `<div>
<item-articulo v-for="art in articulos" v-bind:articulo="art"></item-articulo>
</div>`
})
La componente 'item-articulo' recibe en la propiedad 'articulo' un objeto con un artículo en particular, luego en el template mostramos dicho artículo:
Vue.component('item-articulo', {
props: ['articulo'],
template: `<div>
<p>Código:{{articulo.codigo}}</p>
<p>Descripción:{{articulo.descripcion}}</p>
<p>Precio:{{articulo.precio}}</p><hr>
</div>`
})