Vue3 v-slot-Direktive

Vue3 内置指令Vue3 Eingebaute Direktiven

v-slotDie Direktive wird verwendet, um benannte Slots oder Scoped Slots zu bezeichnen, für die Inhaltsverteilung zwischen Komponenten.

Grundlegende Beschreibung

v-slotDie Direktive wird verwendet, um Inhalte für Slots bereitzustellen oder von Slots übergebene Props zu empfangen. Sie ist die Kernmethode zur Implementierung der Inhaltsverteilung zwischen Komponenten in Vue.

  • Kurzform: #
  • Erwarteter TypJavaScript-Ausdruck (optional, nur erforderlich beim Empfang von Props)
  • FunktionBezeichnet benannte Slots oder Scoped Slots.

Grundlegende Verwendung

1. Benannte Slots

Beispiel

<template>
  <base-layout>
    <template v-slot:header>
      <h1>Seitentitel</h1>
    </template>
    <template v-slot:default>
      <p>Hauptinhaltsbereich</p>
    </template>
    <template v-slot:footer>
      <p>Fußzeileninformation</p>
    </template>
  </base-layout>
</template>

2. Kurzform

Beispiel

<!-- Äquivalent -->
<template v-slot:header>Titel</template>
<template #header>Titel</template>

3. Scoped Slots

Scoped Slots ermöglichen es Kindkomponenten, Daten an Elternkomponenten weiterzugeben:

Beispiel

<!-- Elternkomponente -->
<template>
  <current-user v-slot="slotProps">
    <p>Benutzername: {{ slotProps.user.name }}</p>
  </current-user>
</template>

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

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

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

Vue3 内置指令Vue3 Eingebaute Direktiven

Andere Erweiterungen