siehe Beispiel https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Übergeordnete Komponente
<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(); } } Untergeordnete Komponente
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Wie rufe ich eine untergeordnete Methode vom Elternteil auf, wenn @ api-Werte verwendet werden müssen?
Antwort
Dies ist das erwartete Verhalten. Die Eigenschaftswerte werden nach Beendigung der Ausführung der Methode Javascript an das Kind übergeben, sodass alle geänderten Eigenschaften erfasst und die geänderten Werte in die Kette verschoben werden. Sie können dies verstehen, indem Sie die Protokolle im Änderungshandler von dummyStr wie gezeigt verwenden hier
Sie können es auf drei verschiedene Arten implementieren:
Option 1: Verwenden Sie setTimeout (bevorzugt)
Wie gezeigt hier können Sie setTimeout verwenden, um die untergeordnete Methode aufzurufen, nachdem die übergeordnete Methode die Verarbeitung abgeschlossen hat. Durch die Verwendung von setTimeout wird der Aufruf in einen asynchronen Thread verschoben, aufgrund dessen er später nach dem synchronen Thread ausgeführt wird.
setTimeout(()=>this.template.querySelector("c-child").run()); Option 2: Verwenden Sie den Änderungshandler
Wie gezeigt hier können Sie den Änderungshandler im untergeordneten api -Eigenschaft, die nach dem Ändern der Eigenschaft aufgerufen wird.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Option 3: Verwenden Sie den Methodenparameter
Wie gezeigt hier übergeben Sie die erforderlichen geänderten Eigenschaften als Methodenparameter.
this.template.querySelector("c-child").run(this.dummyStr); Kommentare
- Vielen Dank! Ich wusste ' nichts über die erste Option. Ich dachte, dass Werte zwischen Komponenten per Link gesendet werden.
Antwort
Versuchen Sie Folgendes:
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); } } Nach dem Klicken auf „Daten aktualisieren“:
AUSGABE:
Kommentare
- Ich habe gerade dachte, dass Werte zwischen Komponenten per Link senden. Ich erwarte dieses Verhalten nicht