Communication parent-enfant dans LWC – Perficient Blogs

Nous savons tous que Lightning Web Component (LWC) est l'un des modèles de programmation utilisés pour créer des composants Lightning dans Salesforce. C'est une technologie tendance parmi les développeurs Salesforce et elle est recommandée par Salesforce. Savez-vous pourquoi il est largement utilisé ? Parce qu'il est rapide et léger.

L'objectif principal de l'utilisation du développement basé sur les composants est la performance et la réutilisation. Si vous créez des composants Web Lightning, vous devez rencontrer le scénario dans lequel vous devez communiquer entre eux. La communication fait référence à la transmission de données entre deux ou plusieurs composants. Il peut y avoir deux cas. Soit les composants sont connectés les uns aux autres via une sorte de relation comme une relation parent-enfant, soit ils sont indépendants les uns des autres, c'est-à-dire non liés.

Donc, dans ce blog , nous allons couvrir :

• Communication parent-enfant.
• Communication enfant-parent.

Communication parent-enfant

Comme son nom l'indique, la communication parent-enfant se produit entre deux composants lorsque le composant parent contient la balise du composant enfant dans son fichier HTML et transmet les données au composant enfant. Pour transmettre des données au composant enfant, nous devons définir une variable avec le décorateur @api dans le composant enfant pour qu'elle soit publique et accessible depuis le composant parent.

Remarque : @api decorator utilisé pour définir public propriété, qui est réactive.

Considérons un exemple simple pour mieux le comprendre. Ici, nous avons défini une variable getValueFromParent à l'aide du décorateur @api dans l'enfant et l'avons utilisée dans le modèle HTML pour afficher sa valeur dans le composant enfant.

En vous dirigeant maintenant vers le composant parent, déclarez une variable dans le composant parent pour la transmettre au composant enfant. Ici, nous avons créé une variable value et lui avons attribué un littéral de chaîne. Pour transmettre la valeur au composant enfant, ajoutez la balise du composant enfant au modèle HTML parent et attribuez la valeur à la propriété de l'enfant en tant qu'attribut.

Communication enfant à parent

Comme nous l'avons vu, transmettre une propriété publique d'un parent et la recevoir dans l'enfant est le moyen le plus simple d'établir une communication parent à enfant. Dans le cas de la communication enfant-parent, c'est un peu plus compliqué. À partir du composant enfant, nous allons transmettre la valeur au composant parent à l'aide de CustomEvent.

Remarque : Le constructeur CustomEvent a un paramètre obligatoire : une chaîne, qui fait référence au type d'événement.

Dans cet exemple, lorsque l'utilisateur entre quelque chose dans le champ de saisie Lightning, le composant crée et distribue l'événement CustomEvent appelé getsearchvalue. L'événement inclut les données dans la propriété detail.

Le composant parent écoute l'événement getsearchvalue dans l'attribut ongetsearchvalue et le gère dans le gestionnaire d'événements handleSearchValue. Dans handleSearchValue, nous attribuons la valeur de l'événement. détail de la variable searchValue.