lásd a https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit példát
Szülői összetevő
<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(); } } Gyermekkomponens
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Hogyan hívhatjuk meg a szülő gyermek módszerét, ha @api értékeket kell használni?
Válasz
Ez várható viselkedés. A tulajdonságértékeket a javascript metódus futtatásának befejezése után továbbadjuk a gyermeknek, így az összegyűjti az összes megváltozott tulajdonságot, és a megváltozott értékeket lefelé tolja a láncban. Ezt úgy értheti meg, ha a naplók a dummyStr változáskezelőjében vannak, amint az látható itt
Háromféle módon valósíthatja meg:
1. lehetőség: A setTimeout (preferált) használata
Mint látható itt , a setTimeout segítségével meghívhatja a gyermek metódust UTÁN, hogy a szülő metódusa befejezte a feldolgozást. A setTimeout használatával a meghívás aszinkron szálba kerül, ami miatt később a szinkron szál után fut.
setTimeout(()=>this.template.querySelector("c-child").run()); 2. lehetőség: Használja a Change handler alkalmazást
Mint látható itt , a változáskezelőt használhatja a api tulajdonság, amely a tulajdonság megváltoztatása után lesz meghívva.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } 3. lehetőség: Használja a (z)
metódus paramétert, mint látható itt , adja meg a szükséges megváltozott tulajdonságokat metódus paraméterként.
this.template.querySelector("c-child").run(this.dummyStr); Megjegyzések
- Köszönöm szépen! Nem tudtam ' az első lehetőségről. Úgy gondoltam, hogy az összetevők közötti értékek linken keresztül küldenek.
Válasz
Próbálja ki:
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); } } GYERMEK:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Az “Adatok frissítése” gombra kattintás után:
OUTPUT:
Megjegyzések
- Csak úgy gondoltam, hogy az összetevők közötti értékek linken keresztül küldenek. Nem ezt a viselkedést várom