En Vue podemos montar las componentes en forma dinámica, es decir que a partir de ciertos eventos mostrar una componente y ocultar otra.
Si bien se puede con las directivas v-if y v-show mostrar y ocultar componentes hay otra forma de montar una determinada componente mediante la etiqueta component:
<component v-bind:is="nombre de la componente"></component>
Crear dos componentes llamadas 'articulos' y 'proveedores'. Luego en la interfaz visual mediante dos botones indicar cual de las dos componentes se debe ver en la página.
<!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">
<button v-on:click="componenteActual='articulos'">Ver artículos</button>
<button v-on:click="componenteActual='proveedores'">Ver proveedores</button>
<component v-bind:is="componenteActual"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('articulos', {
template: `<div>
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<tr v-for="art in articulos"><td>{{art.codigo}}</td><td>{{art.descripcion}}</td><td>{{art.precio}}</td></tr>
</table>
</div>`,
data: function() {
return {
articulos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
}
})
Vue.component('proveedores', {
template: `<div>
<table border="1">
<tr><td>Nombre</td><td>Dirección</tr>
<tr v-for="prov in proveedores"><td>{{prov.nombre}}</td><td>{{prov.direccion}}</td></tr>
</table>
</div>`,
data: function() {
return {
proveedores: [{
nombre: 'Martinez, luis',
direccion: 'Colon 123'
},{
nombre: 'Rodriguez, ana',
direccion: 'Pringles 534'
}]
}
}
})
var app=new Vue({
el: '#aplicacion',
data:{
componenteActual: 'articulos',
}
})
</script>
</body>
</html>
Mediante la etiqueta component podemos montar una determinada componente indicada en la propiedad v-bind:is que rescatamos del modelo de datos de la instancia Vue:
<component v-bind:is="componenteActual"></component>
Se muestra inicialmente la componente 'articulos' debido que en el modelo de datos tiene dicho valor:
var app=new Vue({
el: '#aplicacion',
data:{
componenteActual: 'articulos',
}
})
Según que botón se presiona se cambia el modelo de datos por otra componente:
<button v-on:click="componenteActual='articulos'">Ver artículos</button>
<button v-on:click="componenteActual='proveedores'">Ver proveedores</button>