Présentation

Lightning Web Components (LWC) est un cadre puissant pour la création d’applications Web sur la plateforme Salesforce. Il encourage un développement modulaire, permettant aux développeurs de créer des composants réutilisables. Une communication efficace entre ces composants est essentielle pour créer des applications dynamiques et interactives. Dans ce blogue, nous explorerons ’les techniques pour atteindre la communication entre l’enfant et le parent dans LWC.

Le besoin de communication entre l’enfant et le parent

Dans une application Web typique, les composants sont souvent organisés dans une hiérarchie, où les composants enfants sont imbriqués dans les composants parents. Les composants enfants doivent communiquer avec leurs composants parents pour diverses raisons, comme l’envoi de données, le déclenchement d’actions ou la mise à jour de l’interface utilisateur en réponse aux interactions avec l’utilisateur. C’est là que la communication entre l’enfant et le parent devient essentielle.

Transmission des données de l’enfant au parent

Il existe plusieurs méthodes pour transmettre les données d’un composant enfant à un composant parent dans LWC. L’une des techniques les plus courantes est l’utilisation d’événements personnalisés :

(1) Dans le fichier JavaScript ’du composant enfant, définissez un événement personnalisé et répartissez-le lorsqu'une action spécifique se produit :

Composant enfant.js

importer { LightningElement,api } à partir de 'lwc';
exporter classe par défaut ChildComponent étend LightningElement {
@api childMsg = 'CECI EST UN COMPOSANT ENFANT';
 poignéeBoutonCliquez() {
 const event = nouvel événement personnalisé('childevent', {
 détail : childMsg
 });
 cet.événement(événement) de répartition;
 }
}

ChildComponent.html

<modèle>
 <carte-éclair>
 <div class="slds-box slds-m-around_small">
 <lightning-button variant="neutral" label="Child button" 
onclick={handleButtonClick}></bouton-éclair>
 <p class="slds-p-horizontal_small">{childMsg}</p>
 </div>
 </carte-éclair>
</modèle>

(2) Dans le fichier HTML ’du composant parent, écoutez l'événement personnalisé et spécifiez la méthode de traitement :

Parent.html

<modèle>
 <c-child-component onchildevent={handleChildEvent}></c-child-component>
</modèle>

(3) Dans le fichier JavaScript ’du composant parent, définissez la méthode de traitement de l'événement personnalisé :

Parent.js

importer { LightningElement } à partir de 'lwc';
exporter classe par défaut ParentComponent étend LightningElement {
 handleChildEvent(événement) {
 const dataFromChild = event.detail;
 // Faire quelque chose avec les données de la composante enfant
 }
}

Lorsque vous cliquez sur le bouton dans le composant enfant, il répartit l'événement “” enfant personnalisé avec les données “enfant.” Le composant parent écoute cet événement et le gère en exécutant la méthode “handleChildEvent”.

@api  decorator est utilisé pour exposer publiquement les propriétés d'un composant enfant afin que le composant parent puisse y accéder.

Conclusion

La communication entre l’enfant et le parent est un aspect fondamental de la création d’applications dynamiques et interactives dans LWC. Les événements personnalisés et les propriétés @api fournissent des mécanismes puissants pour activer cette communication. En mettant en œuvre ces techniques, les développeurs peuvent créer des applications modulaires et bien structurées qui répondent aux interactions des utilisateurs et mettent à jour leur état de façon transparente. Comprendre et maîtriser ces modèles de communication est essentiel pour exploiter le plein potentiel de LWC et créer des applications riches en fonctionnalités sur la plateforme Salesforce.

— Par Shubham Tidke