voir lexemple https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Composant parent
<template> Value in Parent : {objMap.key} Value in Parent : {dummyStr} <lightning-button onclick={updateValue} label="Update Data"></lightning-button> <c-child obj-map={objMap} dummy-str={dummyStr}></c-child> </template> export default class App extends LightningElement { @track objMap = {key:"value"}; @track dummyStr updateValue() { this.objMap.key = "Value2"; this.dummyStr = Math.random(); // <---- ADD NEW VALUE this.template.querySelector("c-child").run(); } } Composant enfant
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Comment appeler la méthode enfant du parent quand il faut utiliser les valeurs @api?
Réponse
Cest un comportement attendu. Les valeurs des propriétés seront transmises à lenfant après la fin de lexécution de la méthode javascript afin quelle recueille toutes les propriétés modifiées et pousse les valeurs modifiées dans la chaîne. Vous pouvez comprendre cela en ayant les journaux dans le gestionnaire de modification de dummyStr comme indiqué ici
Vous pouvez limplémenter de 3 manières différentes:
Option 1: Utilisez setTimeout (de préférence)
Comme indiqué ici , vous pouvez utiliser setTimeout pour appeler la méthode enfant APRÈS que la méthode parent ait terminé le traitement. Lutilisation de setTimeout poussera lappel dans un thread asynchrone à cause duquel il sexécutera plus tard après un thread synchrone.
setTimeout(()=>this.template.querySelector("c-child").run()); Option 2: Utiliser le gestionnaire de modifications
Comme indiqué ici , vous pouvez utiliser le gestionnaire de modifications dans lenfant api propriété qui sera appelée après la modification de la propriété.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Option 3: Utilisez le paramètre de méthode
Comme indiqué ici , transmettez les propriétés modifiées requises comme paramètres de méthode.
this.template.querySelector("c-child").run(this.dummyStr); Commentaires
- Merci beaucoup! Je ne ' pas au courant de la première option. Je pensais que les valeurs entre les composants étaient envoyées par lien.
Réponse
Essayez ceci:
import { LightningElement, track } from "lwc"; export default class App extends LightningElement { @track objMap = {key:"value"}; @track dummyStr updateValue() { this.objMap.key = "Value2"; this.dummyStr = Math.random(); this.template.querySelector("c-child").run(this.dummyStr); } } ENFANT:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Après avoir cliqué sur « Mettre à jour les données »:
SORTIE:
Commentaires
- Je viens pensé que les valeurs entre les composants envoient par lien. Je ne mattends pas à ce comportement