zie voorbeeld https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Bovenliggende component
<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(); } } Onderliggende component
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Hoe de child-methode van de ouder aanroepen wanneer @api-waarden moeten worden gebruikt?
Answer
Dit is verwacht gedrag. De waarden van de eigenschappen worden doorgegeven aan het kind nadat de methode javascript is voltooid, zodat alle gewijzigde eigenschappen worden verzameld en de gewijzigde waarden door de keten worden geduwd. U kunt dit begrijpen door de logboeken in de wijzigingshandler van dummyStr te hebben, zoals weergegeven hier
U kunt het op 3 verschillende manieren implementeren:
Optie 1: gebruik setTimeout (bij voorkeur)
Zoals hier , u kunt setTimeout gebruiken om de onderliggende methode aan te roepen NADAT de bovenliggende methode de verwerking heeft voltooid. Door setTimeout te gebruiken, wordt de aanroep naar een asynchrone thread geduwd, waardoor deze later na een synchrone thread wordt uitgevoerd.
setTimeout(()=>this.template.querySelector("c-child").run()); Optie 2: gebruik Change handler
Zoals getoond hier kunt u de wijzigingshandler gebruiken in het onderliggende api eigenschap die wordt aangeroepen nadat de eigenschap is gewijzigd.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Optie 3: gebruik methodeparameter
Zoals getoond hier , geef de vereiste gewijzigde eigenschappen door als methodeparameters.
this.template.querySelector("c-child").run(this.dummyStr); Reacties
- Heel erg bedankt! Ik wist ' niet van de eerste optie. Ik dacht dat waarden tussen componenten via een link worden verzonden.
Antwoord
Probeer dit:
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); } } KIND:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Na het klikken op “Update Data”:
OUTPUT:
Reacties
- Ik heb zojuist dacht dat waarden tussen componenten via een link worden verzonden. Ik verwacht dat gedrag niet