La interfaz de una componente la podemos transformar mediante datos que le enviamos a sus propiedades y también veremos ahora que el contenido del 'template' puede ser modificado mediante el concepto de 'slot'.
Los slot (espacio) se los declara dentro del template de la componente y son espacios que pueden ser redefinidos cuando definimos una componente en el HTML.
Crear una componente que muestre dos botones 'confirmar', 'cancelar' y un hipervínculo. Definir un slot en la componente para poder agregar botones a otras actividades remplazando al hipervínculo.
<!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">
<barra-botones></barra-botones>
<hr>
<barra-botones>
<button>Alta</button> <button>Baja</button> <button>Modificacion</button>
</barra-botones>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('barra-botones',{
template: `
<div><button>Confirmar</button>
<button>Cancelar</button>
<slot><a href="#">Otras opciones</a></slot>
</div>
`
})
new Vue({
el: '#aplicacion'
})
</script>
</body>
</html>
En el navegador tenemos:
Cuando en el HTML creamos una componente de tipo 'barra-botones' sin ningún contenido luego aparece en la página los dos botones y el hipervínculo:
<barra-botones></barra-botones>
Pero cuando creamos una componente y le pasamos dentro tres botones luego los mismos se agregan a la componente:
<barra-botones>
<button>Alta</button> <button>Baja</button> <button>Modificacion</button>
</barra-botones>
En la definición del template se especifica un slot con la etiqueta 'slot' y dentro de la misma puede estar vacía o tener HTML que por defecto aparece si no se especifica valores al crear la componente en la página:
Vue.component('barra-botones',{
template: `
<div><button>Confirmar</button>
<button>Cancelar</button>
<slot><a href="#">Otras opciones</a></slot>
</div>
`
})
Se pueden definir más de un slot en una componente pero estamos obligados a definir un nombre en casa una para luego saber a cual accedemos.
Definir una componente llamada mensaje que tenga tres slot para el titulo, cuerpo y pie del mensaje:
<!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">
<mensaje>
<template slot="titulo"><h1>Título del mensaje</h1></template>
<template slot="cuerpo"><p>Cuerpo del mensaje</p></template>
<template slot="pie"><p>Pie del mensaje</p></template>
</mensaje>
<hr>
<mensaje></mensaje>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('mensaje',{
template:`
<div>
<slot name="titulo"><h1>Sin titulo</h1></slot>
<slot name="cuerpo"><p>Sin cuerpo</p></slot>
<slot name="pie"></slot>
</div>
`
})
new Vue({
el: '#aplicacion'
})
</script>
</body>
</html>
Cuerpo del mensaje
Pie del mensaje