Directiva v-slot de Vue3

Vue3 内置指令Directivas integradas de Vue3

v-slotLa directiva se utiliza para representar slots con nombre o slots de alcance, para la distribución de contenido entre componentes.

Descripción básica

v-slotLa directiva se utiliza para proporcionar contenido a los slots o recibir las props que pasan los slots. Es la forma principal de implementar la distribución de contenido entre componentes en Vue.

  • Forma abreviada: #
  • Tipo esperado: Expresión de JavaScript (opcional, solo se necesita al recibir props)
  • Función: Representa un slot con nombre o un slot de alcance.

Uso básico

1. Slots con nombre

Ejemplo

<template>
  <base-layout>
    <template v-slot:header>
      <h1>Título de la página</h1>
    </template>
    <template v-slot:default>
      <p>Área de contenido principal</p>
    </template>
    <template v-slot:footer>
      <p>Información del pie de página</p>
    </template>
  </base-layout>
</template>

2. Forma abreviada

Ejemplo

<!-- Equivalente -->
<template v-slot:header>Título</template>
<template #header>Título</template>

3. Slots de alcance

Los slots de alcance permiten que un componente hijo pase datos al componente padre:

Ejemplo

<!-- Componente padre -->
<template>
  <current-user v-slot="slotProps">
    <p>Nombre de usuario: {{ slotProps.user.name }}</p>
  </current-user>
</template>

<script>
export default {
  components: { CurrentUser }
}
</script>

<!-- Componente hijo CurrentUser.vue -->
<template>
  <slot :user="currentUser"></slot>
</template>

<script>
export default {
  data() {
    return {
currentUser: { name: 'Zhang San' }
    }
  }
}
</script>

Vue3 内置指令Directivas integradas de Vue3

Otras extensiones