Tragamonedas Vue.js

Las ranuras lo ayudan a colocar el contenido en un componente y permiten que los componentes principales lo organicen.

Un componente puede ser 100% responsable de generar su salida, como en este caso:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

o también puede permitir que el componente principal inyecte cualquier tipo de contenido en él, usandoranuras.

¿Qué es una ranura? Es un espacio en la salida de su componente que está reservado, esperando ser llenado.

Usted define una ranura poniendo<slot></slot>en una plantilla de componente:

Vue.component('user-information', {
  template: '<div class="user-information"><slot></slot></div>'
})

Al usar este componente, cualquier contenido agregado entre la etiqueta de apertura y cierre se agregará dentro del marcador de posición de la ranura:

<user-information>
  <h2>Hi!</h2>
  <user-name name="Flavio"></user-name>
</user-information>

Si pones cualquier contenido al lado del<slot></slot>etiquetas, que sirve como contenido predeterminado en caso de que no se pase nada.

Un diseño de componente complicado puede requerir una mejor manera de organizar el contenido, con múltiples espacios también.

Por eso Vue nos ofreceranuras con nombre.

Tragamonedas con nombre

Con una ranura con nombre, puede asignar partes de una ranura a una posición específica en el diseño de la plantilla de su componente, y usa unslotatributo a cualquier etiqueta, para asignar contenido a ese espacio.

Todo lo que esté fuera de cualquier etiqueta de plantilla se agrega a la etiqueta principal.slot.

Por conveniencia utilizo unpagecomponente de archivo único en este ejemplo:

<template>
  <div>
    <main>
      <slot></slot>
    </main>
    <aside>
      <slot name="sidebar"></slot>
    </aside>
  </div>
</template>

Así es como podemos usarlo, proporcionando el contenido de las ranuras, en un componente principal:

<page>
  <template v-slot:sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2> <p>Page content</p> </page>

Hay una práctica taquigrafía,#:

<page>
  <template #sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2> <p>Page content</p> </page>

Nota: Vue 2.6 desaprobó elslotatributo a favor dev-sloty requiere que se agregue a untemplateetiqueta (mientrasslotpodría aplicarse a cualquier etiqueta)

Ranuras con alcance

En una ranura, no podemos acceder a los datos contenidos en el componente secundario desde el principal.

Vue reconoce este caso de uso y nos proporciona una forma de hacerlo:

<template>
  <div>
    <main>
      <slot v-bind:dogName="dogName"></slot>
    </main>
  </div>
</template>

<script> export default { name: ‘Page’, data: function() { return { dogName: ‘Roger’ } } } </script>

En el padre podemos acceder al nombre del perro que pasamos usando:

<page>
  <template v-slot="slotProps">
    {{ slotProps.dogName }}
  </template>
</page>

slotPropses solo una variable que usamos para acceder a los accesorios que pasamos. También puede evitar configurar una variable solo para mantener los accesorios que pasa al componente secundario, desestructurando el objeto sobre la marcha:

<page>
  <template v-slot="{ dogName }">
    {{ dogName }}
  </template>
</page>

Descarga mi gratisManual de Vue


Más tutoriales de vue: