Comment utiliser les slots pour distribuer du contenu dans Vue

Vue est un framework frontal populaire qui offre un moyen pratique de gérer et d'organiser les composants sur la page. Parmi eux, slot est une fonction très pratique de Vue, qui peut nous aider à distribuer dynamiquement du contenu dans des composants. Cet article expliquera comment utiliser les emplacements pour distribuer du contenu dans Vue et fournira des utilisations et précautions supplémentaires.

1. Comment fonctionne le slot

Dans Vue, slot est utilisé pour fournir un emplacement pour un composant enfant dans le modèle de composant parent, afin que le composant enfant puisse directement insérer du contenu dans le modèle du composant parent. Lorsque vous utilisez des emplacements, vous ajoutez généralement la balise slot dans le modèle de composant parent et ajoutez des emplacements nommés et des emplacements par défaut dans le composant enfant.

L'emplacement par défaut est un emplacement sans nom, qui peut être utilisé pour insérer du contenu par défaut dans des sous-composants. Les emplacements par défaut sont définis à l'aide de l'espace réservé spécial .

Les emplacements nommés sont définis via l'attribut name et vous pouvez spécifier l'emplacement nommé dans lequel le contenu doit être inséré dans le modèle de composant parent. Par exemple :

Ceci est du contenu

Dans cet exemple, le composant parent utilise des emplacements nommés pour spécifier la position de l'en-tête et du pied de page dans le modèle, et utilise également les emplacements par défaut. slot pour spécifier la position de l'élément p.

Utilisation de slot

Dans Vue, slot a également des utilisations courantes, qui peuvent rendre notre code plus concis, flexible et puissant.

2.1 Emplacement par défaut exclusif

Parfois, nous pouvons souhaiter laisser les composants enfants occuper l'emplacement par défaut au lieu de distribuer le contenu au composant parent. Dans ce cas, nous pouvons utiliser la directive v-slot:default pour indiquer à Vue d'utiliser l'emplacement par défaut comme modèle pour le sous-composant. Par exemple :

Dans cet exemple , nous spécifions l'emplacement par défaut comme modèle du composant enfant, obtenant ainsi l'effet "d'insérer le composant enfant dans le composant parent".

2.2 Scoped Slot

Parfois, nous pouvons vouloir accéder aux données du composant enfant dans le composant parent. Dans ce cas, nous pouvons utiliser le slot scoped pour transmettre les données du composant enfant au composant parent. Les emplacements de portée sont définis à l'aide de balises d'emplacement avec des paramètres, qui sont les données transmises par l'emplacement au composant parent. Par exemple :

< ; p>{{ slotProps.msg }}