viz příklad https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Rodičovská součást
<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(); } } Podřízená komponenta
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Jak zavolat podřízenou metodu od rodiče, když potřebujete použít hodnoty @api?
Odpovědět
Toto je očekávané chování. Hodnoty vlastností se předají dítěti poté, co je spuštěn javascript metody, takže shromažďuje všechny změněné vlastnosti a posune změněné hodnoty dolů do řetězce. Můžete tomu porozumět tak, že budete mít obslužnou rutinu změn protokolů dummyStr jak je ukázáno zde
Můžete jej implementovat třemi různými způsoby:
Možnost 1: Použijte setTimeout (preferováno)
Jak je znázorněno zde , můžete použít setTimeout k vyvolání dětské metody PO dokončení rodičovské metody. Použití setTimeout posune vyvolání do asynchronního vlákna, kvůli kterému bude spuštěno později po synchronním vlákně.
setTimeout(()=>this.template.querySelector("c-child").run()); Možnost 2: Použijte obslužný program Change
Jak je znázorněno zde , v podřízeném api vlastnost, která bude vyvolána po změně vlastnosti.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Možnost 3: Použijte parametr metody
Jak je znázorněno zde , předejte požadované změněné vlastnosti jako parametry metody.
this.template.querySelector("c-child").run(this.dummyStr); Komentáře
- Děkuji! Nevěděl jsem ' o první možnosti. Myslel jsem, že hodnoty mezi komponentami se odesílají odkazem.
Odpověď
Zkuste toto:
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); } } DĚTI:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Po kliknutí na možnost „Aktualizovat údaje“:
VÝSTUP:
Komentáře
- Jen myslel, že hodnoty mezi komponentami posílají odkazem. Neočekávám toto chování