Un composant Web Lightning (LWC), un nouveau module Salesforce de plus en plus populaire, nous permet de regrouper le balisage HTML et les styles CSS dans des éléments HTML personnalisés. Cependant, pour comprendre et utiliser correctement un LWC, nous devons comprendre ce qui suit :
- Comment créer un LWC de base
- Composition et communication avec les événements dans un LWC
- Réactivité dans un LWC
Comment créer un composant de base
Un LWC qui rend une interface utilisateur (UI) doit avoir un fichier HTML, un fichier JavaScript et un fichier de configuration de métadonnées.
Composant : fichier HTML
Il doit contenir la balise racine «
Component : JavaScript File
Toute la logique métier des composants est définie dans un JavaScript, et il est écrit sous la forme ".js". Pour importer une classe, une fonction ou une variable déclarée dans un module, utilisez l'instruction « import ». Pour permettre à un autre code d'utiliser une classe, une fonction ou une variable déclarée dans un module, utilisez l'instruction « export ».
Composant : fichier de configuration
Tous les paramètres de configuration LWC sont inclus dans un métafichier . Par exemple, « » est défini sur true pour exposer le composant dans toutes les organisations. Nous pouvons définir des cibles où nous voulions utiliser notre LWC en utilisant la balise "".
Composition et communication
L'imbrication de composants les uns dans les autres est appelée composition de composants. Cela permet de créer des applications complexes.
Dans l'exemple ci-dessus, un « exemple à faire » est le composant parent, tandis que « l'exemple à faire » est le composant enfant. En règle générale, le composant enfant est nommé en tant que composant propriétaire et le composant parent est appelé en tant que composant conteneur.
Communication Using Events
Un LWC peut créer et distribuer des événements dans des événements personnalisés, qui sont des événements créés manuellement par un développeur . Généralement, le composant enfant indique au composant parent qu'un événement s'est produit et le composant parent envoie des données pour le composant enfant.
Events Up, Properties Down
Pour créer un événement, utilisez le constructeur "CustomEvent()" . Le composant parent a un gestionnaire pour répondre à cet événement. Les informations peuvent être transmises du composant parent au composant enfant à un autre niveau à l'aide des méthodes « public » et « private ».
Un composant propriétaire peut :
- Définir des propriétés publiques
- Écouter les événements distribués[19659024]Un composant conteneur peut :
- Lire, mais pas modifier, les propriétés publiques
- Appeler des méthodes publiques
Réactivité dans un LWC
Observer le changement dans les propriétés et les valeurs, puis le composant de rendu est la réactivité de LWC. LWC dispose de trois décorateurs pour ajouter des fonctionnalités aux propriétés.
- @track – Les propriétés privées peuvent être rendues réactives à l'aide du décorateur @track. Ces propriétés développent une liaison de données derrière une scène et mettent à jour le modèle lors de la modification de la valeur.
- @api – Utilisez le décorateur @api pour définir les propriétés publiques dans votre composant. En règle générale, les valeurs de ces propriétés peuvent être fournies par le composant parent.
- @wire – Pour lire les données Salesforce, les composants Web Lightning utilisent un service filaire réactif.
Les LWC continueront de gagner en popularité
Les LWC sont toujours nouvelles, mais les connaître est la première étape pour les utiliser. Avec l'introduction de LWC Salesforce, il y a eu plusieurs opportunités pour les développeurs de toute expérience de créer et de développer sur la plate-forme Salesforce. Pour plus d'informations ou d'autres questions, contactez nos experts dès aujourd'huiet bon développement !
Références
Source link