se exempel https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Överordnad komponent
<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(); } } Underkomponent
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Hur man kallar barnmetod från förälder när man behöver använda @api-värden?
Svar
Detta är förväntat beteende. Egenskapsvärdena kommer att överföras till underordnat när metodens javaskript är klart så att det samlar alla ändrade egenskaper och trycker de ändrade värdena ner i kedjan. Du kan förstå detta genom att ha loggarna i ändringshanteraren för dummyStr som visas här
Du kan implementera det på tre olika sätt:
Alternativ 1: Använd setTimeout (föredragen)
Som visas här , du kan använda setTimeout för att åberopa den underordnade metoden NÄR den överordnade metoden har slutfört behandlingen. Att använda setTimeout kommer att trycka på anropet till asynkron tråd på grund av vilken den kommer att köras senare efter synkron tråd. > Alternativ 2: Använd Ändringshanteraren
Som visas här , du kan använda ändringshanteraren i underordnat api egenskap som anropas efter att egenskapen har ändrats.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Alternativ 3: Använd metodparameter
Som visas här , skicka de ändrade egenskaperna som metodparametrar.
this.template.querySelector("c-child").run(this.dummyStr); Kommentarer
- Tack så mycket! Jag visste inte ' om det första alternativet. Jag trodde att värden mellan komponenter skickas med länk.
Svar
Prova det här:
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); } } BARN:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Efter att ha klickat på ”Uppdatera data”:
UTGÅNG:
Kommentarer
- Jag bara trodde att värden mellan komponenter skickas med länk. Jag förväntar mig inte det beteendet