Comprendre les emplacements dans Vue avec l'API de composition

Les emplacements sont un mécanisme puissant dans Vue qui permet aux composants de définir des zones de contenu qui peuvent être personnalisées par le composant parent. Cela favorise la réutilisabilité et la flexibilité dans la création de composants d’interface utilisateur. Vue 3 propose deux types d'emplacements principaux :

• Emplacements normaux : fournissent un moyen simple d'injecter du contenu du composant parent dans le modèle du composant enfant.
• Scoped Slots : permet une personnalisation plus avancée en transmettant des données (une portée) du composant enfant au contenu de l'emplacement, permettant un rendu dynamique basé à la fois sur les données parent et enfant.

Dans Vue 3, les slots vous permettent de créer des composants flexibles en fournissant un moyen de transmettre du contenu aux composants enfants. L'API Composition améliore la façon dont nous utilisons les emplacements, la rendant plus intuitive et puissante.

Que sont les machines à sous ?

Les emplacements sont un moyen de définir du contenu d'espace réservé dans un composant qui peut être rempli de contenu personnalisé lorsque le composant est utilisé. Ils aident à créer des composants réutilisables et personnalisables.

Types de machines à sous

• Slot par défaut : le type le plus courant, il vous permet de transmettre du contenu sans nom spécifique.
• Emplacements nommés : ceux-ci vous permettent de spécifier différents emplacements avec des noms uniques, permettant des mises en page plus complexes.
• Slots de portée : ceux-ci fournissent un moyen d'exposer les données du composant enfant au composant parent à l'aide d'un emplacement. Utiliser des emplacements avec l'API de composition

Utiliser des emplacements avec l'API de composition

Voici comment définir et utiliser des emplacements dans un composant Vue 3 à l'aide de l'API Composition :
Exemple d'emplacement par défaut

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Utilisation :

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Emplacements nommés

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Utilisation :

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

Emplacements limités

Les emplacements à portée vous permettent de transmettre les données du composant enfant au parent.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

Utilisation :

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

Exemple : livraison de produits alimentaires avec des emplacements dans Vue 3

Créons une application simple de livraison de nourriture en utilisant Vue 3 avec l'API Composition et les emplacements. Cet exemple présentera un composant principal FoodDelivery qui utilise des emplacements pour afficher une liste de produits alimentaires, ainsi qu'un en-tête et un pied de page.

Étape 1 : Créer le composant principal

Voici le composant FoodDelivery qui accepte des emplacements nommés pour l'en-tête, les produits alimentaires et le pied de page.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

Étape 2 : Créer un composant d'aliment

Ensuite, créons un composant FoodItem simple pour représenter des produits alimentaires individuels.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

Étape 3 : Utilisation des composants

Maintenant, rassemblons le tout dans un composant parent qui utilise nos composants FoodDelivery et FoodItem.

Laissez-moi vous expliquer

Composant FoodDelivery : ce composant fait office de mise en page pour notre service de livraison de nourriture. Il accepte trois emplacements : un en-tête, un emplacement par défaut pour les produits alimentaires et un pied de page.
Composant FoodItem : il représente des produits alimentaires individuels. Il prend le nom et le prix comme accessoires et dispose d'une méthode pour simuler l'ajout de l'article à un panier.

• Composant d'application : il s'agit du composant parent où tout est rassemblé. Il utilise le composant FoodDelivery et remplit les emplacements avec un message de bienvenue, une liste de composants FoodItem et un message de remerciement.

Cas d'utilisation

• Personnalisation des listes : Les emplacements de portée sont idéaux pour créer des composants de liste où chaque élément peut avoir une logique de rendu distincte en fonction de ses propriétés. Le composant enfant peut transmettre les données de l'élément à l'emplacement et le composant parent peut définir le modèle pour chaque élément à l'aide de l'emplacement de portée. (BasePaginated.vue)
• Rendu conditionnel : Les emplacements à portée permettent un rendu sélectif au sein du composant enfant en fonction des données qu'il fournit à l'emplacement. Par exemple, vous pouvez afficher sous condition un message ou un état d'erreur dans le contenu de l'emplacement.
• Mise en page complexe : Les emplacements à portée facilitent la création de mises en page plus complexes dans lesquelles différentes parties de la mise en page peuvent être personnalisées par le composant parent tout en permettant au composant enfant d'injecter du contenu ou des fonctionnalités spécifiques à l'aide de la portée.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Considérations avancées

• Emplacements de portée nommés : vous pouvez attribuer des noms aux emplacements de portée (par exemple, ...), ce qui vous permet d'avoir plusieurs emplacements de portée nommée dans un seul composant enfant et de les référencer par leur nom dans le composant parent.
• Fonctions des emplacements : dans Vue 2, les emplacements étaient accessibles en tant que $slots dans le composant enfant. Vue 3 propose une approche plus réactive en utilisant $scopedSlots, qui sont des fonctions qui permettent d'accéder au contenu du slot. Cela permet une manipulation dynamique des emplacements et un rendu conditionnel au sein du composant enfant.

Améliorons l'exemple d'emplacement étendu pour le rendre plus clair et plus fonctionnel. Cet exemple montrera comment utiliser les emplacements de portée pour transmettre les données d'élément d'un composant enfant à un composant parent, permettant ainsi un rendu flexible.

Étape 1 : Créer le composant ItemList

Ce composant affichera une liste d'éléments et utilisera un emplacement limité pour permettre au parent de personnaliser la façon dont chaque élément est rendu.

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Étape 2 : Utilisation du composant ItemList avec des emplacements limités

Maintenant, créons un composant parent qui utilise le composant ItemList et fournit un modèle personnalisé pour le rendu de chaque élément à l'aide de l'emplacement de portée.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Composant ItemList :

• Ce composant définit une liste d'éléments et utilise un emplacement limité pour exposer chaque élément au composant parent.
• Si aucun emplacement n'est fourni, la description de l'article est affichée par défaut. ###Composant parent :
• Ce composant utilise ItemList et fournit un modèle personnalisé pour le rendu de chaque élément.
• Il accède aux données de l'article via l'emplacement limité et comprend un bouton qui déclenche une fonction lorsque vous cliquez dessus.

L'exemple montre comment utiliser efficacement les emplacements limités dans Vue 3 pour créer une structure de composants flexible et réutilisable. Le composant parent peut personnaliser le rendu de chaque élément tout en accédant aux données fournies par le composant enfant.

Récapitulons

Cet exemple illustre comment vous pouvez utiliser les emplacements dans une application Vue 3 pour créer un système de composants de livraison de nourriture flexible. Vous pouvez facilement personnaliser l'en-tête, le pied de page et le contenu sans modifier le composant principal. Si vous avez d'autres questions ou avez besoin de plus de détails, n'hésitez pas à les poser dans un commentaire.

En exploitant efficacement les emplacements normaux et étendus dans Vue 3 avec l'API Composition, vous pouvez créer des composants d'interface utilisateur hautement réutilisables et personnalisables, favorisant la maintenabilité et l'organisation du code dans vos applications Vue. Vous pouvez choisir le type d'emplacement approprié en fonction de vos exigences spécifiques en matière d'injection de contenu et de rendu dynamique.
La façon de grandir est de se connecter.
Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!