Explication détaillée de la fonction slot dans Vue3 : utiliser les slots pour implémenter des applications de composants plus flexibles

Dans Vue3, l'utilisation des slots peut permettre d'obtenir des applications de composants plus flexibles. Cet article présentera en détail l'application de la fonction slot dans Vue3.

1. Apprenez à connaître les slots

Dans Vue, slot est une balise spéciale qui fonctionne comme un modèle en HTML et peut être utilisée pour insérer des composants. Les emplacements de Vue3 sont bien plus avancés que Vue2, offrant une utilisation plus flexible.

2. Utiliser l'emplacement par défaut

Dans Vue3, nous pouvons utiliser l'emplacement par défaut dans le modèle de composant. L'emplacement par défaut signifie que si une scène de composant contient un nombre incertain de nœuds enfants, ces nœuds enfants peuvent être placés dans la balise du composant et finalement rendus. C'est aussi simple que d'utiliser les emplacements par défaut comme les emplacements dans Vue2.

Par exemple, nous pouvons définir un composant nommé HelloWorld, et le modèle de composant contient un slot par défaut :

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

Ce composant affichera une balise h1 et un groove de slot par défaut.

Lors de l'utilisation de ce composant, nous pouvons transmettre des données comme suit :

<template>
  <HelloWorld title="Welcome to my page">
    This is my website.
  </HelloWorld>
</template>

Le code HTML qui sera rendu est :

<div class="hello">
  <h1>Welcome to my page</h1>
  <slot>This is my website.</slot>
</div>

Comme vous pouvez voyez, lorsque nous utilisons le composant, nous passons « Ceci est mon site Web ». à l'emplacement par défaut, et le composant le place dans le modèle.

3. Utiliser des emplacements nommés

Dans certains cas, nous devons utiliser plusieurs emplacements. Cette fonctionnalité est également fournie dans Vue3. Un emplacement nommé consiste à ajouter un attribut de nom à la balise slot pour définir un nom pour l'emplacement. Par exemple :

<template>
  <div class="todo-list">
    <h3>任务清单</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <slot name="task" :task="task"></slot>
      </li>
    </ul>
  </div>
</template>

Dans ce composant, nous définissons un slot nommé "task" et passons un paramètre task. Lors de l'utilisation de ce composant, nous pouvons utiliser la directive v-slot dans la balise pour faire correspondre l'emplacement nommé :

<template>
  <TodoList>
    <template #task="{ task }">
      <span>{{ task.name }}</span>
      <button v-if="task.isComplete" @click="task.isComplete = false">完成</button>
      <button v-else @click="task.isComplete = true">未完成</button>
    </template>
  </TodoList>
</template>

Dans l'exemple ci-dessus, nous avons utilisé la balise template et la directive v-slot pour spécifier le le nom de l'emplacement à utiliser est "tâche". Ici, un nom de tâche est spécifié, puis les instructions v-if et v-else sont utilisées pour déterminer si la tâche est terminée.

4. Utilisez les emplacements de portée

Dans Vue3, en plus des emplacements nommés, il fournit également la fonction d'emplacements de portée. Les emplacements de portée utilisent des paramètres dans des emplacements nommés non seulement pour transmettre des données, mais également pour restituer des modèles plus complexes.

Par exemple, nous avons un composant de liste, et chaque élément de liste doit afficher un bouton pour se supprimer. De tels composants peuvent être implémentés à l'aide des emplacements de portée de vue.js.

<template>
  <ul>
    <slot v-for="item in items" :item="item" v-bind="item"></slot>
  </ul>
</template>

Dans ce composant, nous utilisons un emplacement de portée nommé "default" pour parcourir chaque élément du tableau d'éléments et les transmettre afin que les sous-composants puissent accéder aux détails de l'élément.

Lors de l'utilisation de ce composant, vous devez utiliser le modèle et les instructions du v-slot dans la balise pour correspondre à l'emplacement de la portée :

<template>
  <List :items="todos">
    <template #default="props">
      <li>
        <input type="checkbox" v-model="props.item.isDone" />
        <span :class="{ done: props.item.isDone }">{{ props.item.text }}</span>
        <button @click="remove(props.item)">x</button>
      </li>
    </template>
  </List>
</template>

Dans cet exemple, nous utilisons "# " définit l'emplacement de portée et accède aux données via des accessoires.

Summary

La fonction slot de Vue3 offre une variété d'utilisations flexibles pour nous aider à implémenter des composants plus complexes. Nous pouvons utiliser des emplacements par défaut pour insérer du contenu via des modèles ; utiliser des emplacements nommés pour transmettre plusieurs emplacements ; utiliser des emplacements de portée pour transmettre des modèles et des données complexes. Grâce à ces fonctions, nous pouvons écrire des composants plus flexibles et améliorer la réutilisation et la lisibilité du code.

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!