Comment utiliser le v-slot nommé slot dans Vue

Vue est un framework JavaScript populaire qui est particulièrement populaire lors de la création d'applications frontales d'une seule page. Vue fournit diverses fonctions et API intégrées, dont l'une utilise des emplacements nommés v-slot. Dans cet article, nous comprendrons le concept de v-slot nommé slots et expliquerons comment les utiliser en fournissant des exemples pratiques.

Qu'est-ce que le v-slot nommé slot ?

v-slot nommé slot est un mécanisme de slot plus flexible et plus puissant dans Vue. Le concept de base est de fournir à un composant un point d'insertion supplémentaire (c'est-à-dire un emplacement) afin que vous puissiez insérer votre propre contenu à l'intérieur du composant. v-slot Les emplacements nommés vous permettent de donner des noms d'emplacements afin qu'ils puissent être référencés dans les modèles de composants.

Dans Vue 2.x, utilisez la directive v-slot pour définir le contenu du slot et transmettez-le au composant enfant lorsque le composant parent s'exécute. Dans Vue 3.x, la directive v-slot a été renommée #, mais la syntaxe reste la même.

Utilisation de v-slot nommé slots

Montrons comment utiliser v-slot nommé slots à travers un exemple pratique.

Nous allons créer un composant TodoList qui affichera les tâches à effectuer. En utilisant le v-slot nommé slots, nous créons deux emplacements : un pour afficher le contenu d'un seul élément de la liste de tâches et un autre pour afficher le contenu après la fin de la liste.

Voici un exemple de code pour le modèle de composant TodoList :

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
    <slot name="after"></slot>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la directive v-for pour parcourir le tableau items, puis utilisons la directive slot pour insérer dynamiquement l'élément v-for dans la fente « élément ». De même, nous définissons un slot nommé "after" en fin de liste pour afficher le contenu après la fin de la liste.

Voyons maintenant un exemple utilisant le composant TodoList. Voici l'exemple de code du modèle de composant parent :

<template>
  <div>
    <todo-list :title="title" :items="items">
      <template v-slot:item="props">
        <li>{{ props.item }}</li>
      </template>
      <template v-slot:after>
        <p>List ended.</p>
      </template>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList,
  },
  data() {
    return {
      title: 'My Todo List',
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

Dans le code ci-dessus, nous importons d'abord le composant TodoList via la directive d'importation. Nous utilisons ensuite l'élément todo-list dans le modèle de composant parent et transmettons les données au composant TodoList via la directive v-bind. Enfin, nous utilisons des emplacements nommés pour insérer un élément personnalisé et du contenu final dans le composant TodoList.

Résumé

Dans cet article, nous avons appris le concept et l'utilisation du v-slot nommé slots dans Vue. Avec le v-slot nommé slots, nous pouvons avoir un meilleur contrôle sur le contenu des composants et créer des composants réutilisables de manière plus flexible et plus puissante. Lorsque vous utilisez des slots nommés v-slot dans des projets réels, donnez aux slots des noms significatifs pour rendre le code plus lisible et maintenable.

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!