vezi exemplu https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Componenta părinte
<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(); } } Componenta copil
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Cum să apelați metoda copil de la părinte când trebuie să utilizați valorile @api?
Răspuns
Acesta este un comportament așteptat. Valorile proprietăților vor fi transmise copilului după ce metoda javascript este terminată de rulare, astfel încât să colecteze toate proprietățile modificate și să împingă valorile modificate în jos în lanț. Puteți înțelege acest lucru având jurnalele în gestionarul de schimbare al dummyStr așa cum se arată aici
Puteți să-l implementați în 3 moduri diferite:
Opțiunea 1: utilizați setTimeout (preferat)
Așa cum se arată aici , puteți utiliza setTimeout pentru a invoca metoda copil DUPĂ ce metoda părinte finalizează procesarea. Utilizarea setTimeout va împinge invocarea într-un fir asincron din cauza căruia va rula ulterior după firul sincron.
setTimeout(()=>this.template.querySelector("c-child").run()); Opțiunea 2: Utilizați handlerul de schimbare
Așa cum se arată aici , puteți utiliza handlerul de schimbare în copil api proprietate care va fi invocată după modificarea proprietății.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Opțiunea 3: utilizați parametrul metodei
După cum se arată aici , treceți proprietățile modificate necesare ca parametri ai metodei.
this.template.querySelector("c-child").run(this.dummyStr); Comentarii
- Mulțumesc mult! Nu ' nu știam despre prima opțiune. Am crezut că valorile dintre componente se trimit prin link.
Răspuns
Încercați acest lucru:
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); } } COPIL:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } După ce ați făcut clic pe „Actualizare date”:
IEȘIRE:
Comentarii
- Tocmai am crezut că valorile dintre componente se trimit prin link. Nu mă aștept la acest comportament