Directive v-slot de Vue3

Vue3 内置指令Vue3 Directives intégrées

v-slotLa directive est utilisée pour désigner des slots nommés ou des slots à portée, pour la distribution du contenu entre les composants.

Description de base

v-slotLa directive est utilisée pour fournir du contenu aux slots ou recevoir les props transmises par les slots. C'est la méthode essentielle pour implémenter la distribution de contenu des composants dans Vue.

  • Abréviation: #
  • Type attenduExpression JavaScript (facultative, nécessaire uniquement lors de la réception de props)
  • FonctionDésigne des slots nommés ou des slots à portée.

Utilisation de base

1. Slots nommés

Exemple

<template>
  <base-layout>
    <template v-slot:header>
      <h1>Titre de la page</h1>
    </template>
    <template v-slot:default>
      <p>Zone de contenu principale</p>
    </template>
    <template v-slot:footer>
      <p>Informations de pied de page</p>
    </template>
  </base-layout>
</template>

2. Forme abrégée

Exemple

<!-- Équivalent -->
<template v-slot:header>Titre</template>
<template #header>Titre</template>

3. Slots avec portée

Les slots avec portée permettent aux composants enfants de transmettre des données aux composants parents :

Exemple

<!-- Composant parent -->
<template>
  <current-user v-slot="slotProps">
    <p>Nom d'utilisateur: {{ slotProps.user.name }}</p>
  </current-user>
</template>

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

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

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

Vue3 内置指令Vue3 Directives intégrées

Autres extensions