Hay otra variante de slot que nos permiten comunicar datos desde la componente a donde la definimos a la misma.
Con esta variante podemos crear una componente que tenga una forma de mostrar datos por defecto, pero si se define un slot-scope luego la forma de mostrar los datos queda como responsabilidad fuera de la componente.
Crear una componente llamada 'dias-semana'. Por defecto muestra los días uno al lado del otro separados por un guión. Definir un slot-scope que pase cada día para que en la zona del HTML donde se define un objeto se muestre de diferente forma.
<!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="aplicacion1">
<dias-semana></dias-semana>
<hr>
<dias-semana>
<h1 slot-scope="valor">
{{valor.nombre}}
</h1>
</dias-semana>
<hr>
<dias-semana>
<p slot-scope="valor">
Día:{{valor.nombre}}
</p>
</dias-semana>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('dias-semana', {
template:`<div><slot v-for="dia in dias" v-bind:nombre="dia">{{dia}}-</slot></div>`,
data: function() {
return {
dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
}
}
})
new Vue({
el: '#aplicacion1'
})
</script>
</body>
</html>
Día:{{valor.nombre}}
En la componente del modelo definimos un vector con los 7 días de la semana. En el template definimos un slot y una propiedad llamada nombre con la directiva v-bind:
Vue.component('dias-semana', {
template:`<div><slot v-for="dia in dias" v-bind:nombre="dia">{{dia}}-</slot></div>`,
data: function() {
return {
dias: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']
}
}
})
Si definimos una componente sin slot luego se ejecuta el template mostrando cada día separado por un guión:
<dias-semana></dias-semana>
Si le pasamos un slot con la propiedad slot-spope luego podemos recuperar los datos que se envían desde la componente y mostrarlos según nuestras necesidades:
<dias-semana>
<h1 slot-scope="valor">
{{valor.nombre}}
</h1>
</dias-semana>
Se muestran cada día como un título h1.
El tercer elemento 'dias-semana' se muestran uno por párrafo junto a la etiqueta 'Día:'
<dias-semana>
<p slot-scope="valor">
Día:{{valor.nombre}}
</p>
</dias-semana>