Curso Vue.js

# Vue Slots

# Slot Básico

# Componente Slots.vue

Crea un componente llamado Slots.vue

<template>
  <button class="button">
    <slot>Enviar</slot>  
  </button>
</template>

# Vista SlotBasic.vue

Podemos modificar el texto que por defecto aparece en el slot Componete.vue por el texto que intruzcamos en el archivo de la carpeta Vista entre el componente con slot.

<template>
<Slots>Cancelar</Slots>
</template>

```js
<script>
import Slots from '@/components/Slots.vue'

export default {
  name: 'Home',
  components: {
    Slots
  }
}
</script>

Introduce el texto Cancelar en el componente Slots

<Slots>Cancelar</Slots>

# Directiva v-slot

Utiliza v-slot:name cuando añades el nombre directamente.

<template v-slot:name></template>

Utiliza v-slot[slotName] cuando lo vincules a una variable

<template v-slot:[slotName]></template>

# v-slot múltiples

Cuando trabajamos con varios slot tenemos aque añadirle un nombre para utilizar el slot correspondiente en la parte de Vista.

# Componente Esquema.vue

<template>
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot name="default"></slot>
  </main>
  <aside>
    <slot name="aside"></slot>
  </aside>
</template>

# Vista SlotMultiple.vue

Para poder utilizar los slopt tendremos que anidar cada slot con una etiqueta template donde utilizaremos la directiva v-slot.

<template>
  <div class="centrado">
    <Esqueleto>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
      <template v-slot:default>
        <h1>Contenido</h1>
      </template>
      <template v-slot:aside>
        <h1>Aside</h1>
      </template>
    </Esqueleto>
  </div>
</template>

<script>
import Esquema from '@/components/Esquema.vue'

export default {
  name: 'Home',
  components: {
    Esquema
  }
}
</script>

# v-slot scoped

# Componente Libro.vue

<template>
  <div class="libro" >
    <slot name="titulo" 
      :tituloLibro="tituloLibro">
    </slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tituloLibro: "Datos provienen del padre"
    }
  }
}
</script>

# Vista Biblioteca.vue

A través de slotProps puedo recibir el props del componente utilizando slotProps + . + props

<template>
  <Libro>
    <!-- <template v-slot:titulo="slotProps">
      {{ slotProps.tituloLibro }}
    </template> -->
     <template v-slot:titulo="{titulo:Libro}">
      {{ tituloLibro }}
    </template> 

  </Libro>
</template>

<script>
import Libro from '@/components/Libro.vue'

export default {
  name: 'About',
  components: {
    Libro
  }
}
</script>