Partage de technologie

Explication complète de la communication des composants Vue 3 : des techniques de base aux techniques avancées

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introduction

Vue 3 introduit l'API Composition, qui apporte une nouvelle flexibilité et puissance à la communication des composants.

Bases de la communication des composants

Définition et fonction des composants

Dans le développement front-end, les composants peuvent être considérés comme des unités indépendantes qui construisent une interface utilisateur. Il encapsule des fonctionnalités et des styles spécifiques, peut être réutilisé et peut être développé et testé indépendamment des autres parties. La fonction principale des composants est d'améliorer la réutilisabilité, la maintenabilité et l'évolutivité du code. En divisant l'interface en plusieurs composants, les développeurs peuvent gérer plus facilement des applications complexes, et chaque composant peut être optimisé pour améliorer l'efficacité globale du développement et les performances des applications.

Arborescence des composants et relation entre les composants parent-enfant

Dans les frameworks frontaux comme Vue.js, les composants peuvent être imbriqués pour former une arborescence de composants. Dans cette structure arborescente, chaque composant peut avoir des sous-composants, et ces sous-composants peuvent avoir leurs propres sous-composants, formant une structure hiérarchique. Cette structure rend claire la relation entre les composants et facilite la gestion et la maintenance.

  • Relation entre les composants parent-enfant : Dans l'arborescence des composants, un composant peut créer un autre composant. Dans ce cas, le créateur est appelé composant parent, et le composant créé est appelé composant enfant. Les composants parents peuvent transmettre des données et des méthodes aux composants enfants, et les composants enfants peuvent envoyer des informations aux composants parents via des événements. Cette relation parent-enfant est à la base de la communication entre les composants.
  • Relation entre frères et sœurs : Plusieurs composants enfants sous le même composant parent sont des relations de composants frères. Les composants frères et sœurs ne peuvent pas communiquer directement entre eux et la communication entre eux doit généralement être relayée via le composant parent.
  • Relations entre les composants ancêtres et descendants : Dans l'arborescence des composants, le composant parent du composant parent est le composant ancêtre et le composant enfant du composant enfant est le composant descendant. Cette relation est particulièrement importante lorsqu’il s’agit de composants profondément imbriqués.

Les concepts d'arbres de composants et de relations entre composants parent-enfant sont cruciaux pour comprendre la communication entre composants. La maîtrise de ces connaissances de base peut aider les développeurs à concevoir et à mettre en œuvre plus efficacement des mécanismes de communication entre les composants.

Communication des composants parent-enfant (Vue 3)

Le parent transmet les données à l'enfant (Props)

Que sont les accessoires
Les accessoires sont un mécanisme permettant aux composants parents de transmettre des données aux composants enfants.Dans Vue 3, utilisezdefinePropsL'API est utilisée pour déclarer les accessoires de réception, ce qui maintient le flux de données unidirectionnel et garantit l'indépendance et la réutilisabilité des composants.

Comment passer des accessoires dans le composant parent
Dans le modèle du composant parent, utilisezv-bindou abréviation:Pour lier des données :

  1. <template>
  2.    <ChildComponent :my-prop="parentData" />
  3. </template>

ici,:my-propIndique qu'il s'agit d'un accessoire lié dynamiquement,parentDataLes données sont-elles définies dans le composant parent。

Comment recevoir des accessoires dans le composant enfant
Dans le composant enfant, utilisezdefinePropsPour déclarer les accessoires reçus :

  1. <script setup>
  2. import { defineProps } from 'vue';
  3.  
  4. const props = defineProps({
  5.    myProp: String
  6. });
  7. </script>

exister<script setup>En sucre syntaxique,definePropsExposera automatiquement les accessoires en tant que propriétés réactives du composant。

L'enfant transmet l'événement au parent (Émettre)

qu'est-ce qui est émis
Emit est un mécanisme permettant aux composants enfants d'envoyer des messages aux composants parents.Dans Vue 3, utilisezdefineEmitsAPI pour déclarer les événements pouvant être émis et utiliseremitfonction pour déclencher des événements.

Comment déclencher un événement dans un composant enfant
Dans la méthode du composant enfant, utilisez defineEmits pour déclarer les événements pouvant être émis, et utiliser emit déclencher:

  1. <script setup>
  2. import { defineEmits } from 'vue';
  3.  
  4. const emit = defineEmits(['my-event']);
  5.  
  6. function triggerEvent() {
  7.    emit('my-event', dataToPass);
  8. }
  9. </script>

defineEmitsest utilisé pour déclarer les événements qu'un composant peut émettre, tandis queemitLes fonctions sont utilisées pour déclencher ces événements.

Comment écouter les événements du composant enfant dans le composant parent
Dans le modèle du composant parent,utiliserv-onou abréviation@ Pour écouter les événements émis par les composants enfants :

  1. <template>
  2.    <ChildComponent @my-event="handleEvent" />
  3. //或者<ChildComponent v-on:my-event="handleEvent" />
  4. </template>

ici,@my-eventIndique que le sous-composant d'écoute émetmy-eventévénement,handleEventIl s'agit d'une méthode définie dans le composant parent. Lorsque l'événement est déclenché, cette méthode sera appelée.

Exemple complet

Supposons qu'il existe un composant parentParentComponentet un sous-composantChildComponent, le composant parent doit transmettre des données au composant enfant et le composant enfant doit notifier le composant parent après une opération spécifique.

composant parentParentComponent.vue

  1. <template>
  2.    <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
  3. </template>
  4.  
  5. <script setup>
  6. import { ref } from 'vue';
  7. import ChildComponent from './ChildComponent.vue';
  8.  
  9. const parentData = ref('initial data');
  10. const handleChildEvent = (data) => {
  11.    console.log('Received data from child:', data);
  12. };
  13. </script>

Sous-ensembleChildComponent.vue

  1. <template>
  2.    <button @click="sendDataToParent">Send Data to Parent</button>
  3. </template>
  4.  
  5. <script setup>
  6. import { defineProps, defineEmits } from 'vue';
  7.  
  8. const props = defineProps({
  9.    myProp: String
  10. });
  11.  
  12. const emit = defineEmits(['child-event']);
  13.  
  14. function sendDataToParent() {
  15.    emit('child-event', props.myProp);
  16. }
  17. </script>

Dans cet exemple, le composant parent passe:my-propTransmettez les données aux composants enfants et transmettez@child-event Écoutez les événements émis par les composants enfants.le composant enfant réussitdefinePropsReçoit le contenu transmis par le composant parentmyProp, et utilisez-le dans l'événement de clic sur le boutonemitEnvoyer les données au composant parent.

Utilisation de Pinia (bibliothèque de gestion d'état pour Vue 3)

Les avantages et fonctionnalités de Pinia

Pinia est la bibliothèque de gestion d'état officiellement recommandée pour Vue 3. Elle fournit un moyen basé sur des composants pour gérer l'état des applications. Voici quelques-uns des principaux avantages et fonctionnalités de Pinia :

  • API de composant: Pinia adopte une API basée sur les composants, rendant la séparation de la gestion des états et de la logique des composants plus naturelle.
  • Prise en charge de TypeScript: Pinia a pris en compte la prise en charge de TypeScript dès le début, permettant une meilleure inférence de type et une meilleure prise en charge de l'éditeur lors du développement avec TypeScript.
  • Modulaire: Pinia vous permet de diviser l'état en plusieurs magasins, et chaque magasin peut gérer indépendamment son propre état et sa propre logique.
  • Compatible API composite: Pinia est parfaitement intégré à l'API Composition de Vue 3, rendant plus naturelle la séparation de la gestion des états et de la logique des composants.
  • Débogage du voyage dans le temps: Pinia fournit des capacités de débogage de voyage dans le temps, permettant aux développeurs de revenir en arrière et d'inspecter facilement les changements d'état.
Comment configurer et utiliser Pinia

Pour commencer à utiliser Pinia, vous devez d'abord installer Pinia :

npm install pinia

Ou utilisez du fil :

yarn add pinia

Ensuite, configurez Pinia dans votre application Vue :

  1. import { createPinia } from 'pinia';
  2.  
  3. const pinia = createPinia();
  4. app.use(pinia);

Créer une boutique :

  1. import { defineStore } from 'pinia';
  2.  
  3. export const useCounterStore = defineStore('counter', () => {
  4.     const count = ref(0);
  5.  
  6.     function increment() {
  7.         count.value++;
  8.     }
  9.  
  10.     return { count, increment };
  11. });

Utiliser le magasin dans le composant :

  1. <script setup>
  2. import { useCounterStore } from '@/stores/counter';
  3.  
  4. const counterStore = useCounterStore();
  5. </script>
  6.  
  7. <template>
  8.     <div>
  9.         <p>Count: {{ counterStore.count }}</p>
  10.         <button @click="counterStore.increment">Increment</button>
  11.     </div>
  12. </template>
Intégration Pinia avec les composants

L'intégration de Pinia avec les composants est très simple, principalement viadefineStore fonction pour créer un magasin. Dans les composants, vous pouvez utiliser directement l'état et les méthodes dans le magasin :

  1. <template>
  2.     <div>
  3.         <p>Count: {{ count }}</p>
  4.         <button @click="increment">Increment</button>
  5.     </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { useCounterStore } from '@/stores/counter';
  10.  
  11.  
  12. const counterStore = useCounterStore();
  13. const { count, increment } = storeToRefs(counterStore);
  14. //如果这里不使用storeToRefs会丢失响应式特性
  15. </script>

Dans l'exemple ci-dessus, on accède directement dans le templatecountpour afficher la valeur du compteur et l'appeler dans l'événement clic sur le boutonincrementMéthode pour incrémenter la valeur du compteur.

Méthode de communication unique de Vue 3

Fournir/Injecter

Utilisation de base de Provide/Inject
Dans Vue 3,provideetinjectIl s'agit d'une méthode de communication entre les composants parents et enfants qui permet à un composant ancêtre d'injecter une dépendance dans tous ses composants descendants, quelle que soit la profondeur de la hiérarchie des composants.

  • fournir des données: Utilisation du composant ancêtreprovideLes fonctions fournissent des données.
  • Injecter des données: utilisé par les composants descendantsinjectLa fonction injecte des données.

Scénarios applicables pour Provide/Inject
provideetinjectApplicable aux scénarios suivants :

  • Lorsque vous souhaitez éviter de passer par plusieurs couchespropslors de la transmission de données.
  • Lorsque vous souhaitez que plusieurs composants de l'arborescence des composants partagent des données.

Exemple de code：

  1. // 祖先组件
  2. export default {
  3.   setup() {
  4.     const message = 'Hello from Ancestor!';
  5.     provide('message', message);
  6.   }
  7. }
  8.  
  9. // 子孙组件
  10. export default {
  11.   setup() {
  12.     const message = inject('message');
  13.     return { message };
  14.   }
  15. }
Téléportation

Le concept et l'utilisation de Teleport
TeleportIl s'agit d'un nouveau composant intégré ajouté à Vue 3, qui vous permet de "transmettre" une partie du modèle à l'intérieur d'un composant vers n'importe quel autre emplacement du DOM.

Comment utiliser Teleport pour la communication entre composants
Teleport Il n'est pas utilisé pour la communication entre les composants, mais pour contrôler la position de rendu des composants.mais tu peux utiliserTeleportUne méthode de communication spéciale est obtenue en restituant des parties d'un composant dans le DOM du composant parent.

Exemple de code：

  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <Teleport to="body">
  5.       <ChildComponent />
  6.     </Teleport>
  7.   </div>
  8. </template>
  9.  
  10. <!-- 子组件 -->
  11. <template>
  12.   <div>Some content</div>
  13. </template>
API de composition

Introduction à l'API de composition
Vue 3 introduit l'API Composition, qui offre une nouvelle façon d'organiser et de réutiliser la logique.passersetupLes fonctions permettent aux développeurs de contrôler de manière plus flexible l'état de réactivité et le cycle de vie des composants.

Utilisez ref et reactive pour la communication inter-composants
refetreactiveIl s'agit d'un outil de l'API Composition permettant de créer des données réactives.

  • refRéférences réactives pour créer des types de données de base.
  • reactiveRéférence réactive pour la création de types d'objets.

Utilisation de provide et inject dans l'API Composition
Dans l'API de composition,provideetinjectadmissiblesetupUtilisé dans les fonctions pour réaliser une communication entre composants.

Exemple de code：

  1. // 祖先组件
  2. import { provide } from 'vue';
  3.  
  4. export default {
  5.   setup() {
  6.     const message = ref('Hello from Ancestor!');
  7.     provide('message', message);
  8.   }
  9. }
  10.  
  11. // 子孙组件
  12. import { inject } from 'vue';
  13.  
  14. export default {
  15.   setup() {
  16.     const message = inject('message');
  17.     return { message };
  18.   }
  19. }

Grâce à ces méthodes de communication uniques de Vue 3, les développeurs peuvent organiser de manière plus flexible la communication entre les composants et améliorer la maintenabilité et la réutilisation du code.

Résumer

Vue 3 introduit l'API Composition, qui apporte une nouvelle flexibilité et des fonctionnalités puissantes à la communication des composants. La communication entre les composants est la clé de la création d'interfaces utilisateur complexes dans le développement front-end. Elle implique le transfert de données et le déclenchement d'événements entre les composants parents et enfants, les composants frères et les composants ancêtres et descendants. Vue 3 fournit une variété de méthodes de communication, y compris les accessoires et émissions traditionnels, ainsi que les nouvelles API Provide/Inject, Teleport et Composition.

Informations connexes recommandées

La création n'est pas facile. Si cet article vous aide, pouvez-vous me donner un like ?

Profil personnel

Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail