katso esimerkki https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Ylempi komponentti
<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(); } } Lapsikomponentti
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Kuinka soittaa lapsen metodille vanhemmalta, kun on käytettävä @api-arvoja?
Vastaa
Tämä on odotettua käyttäytymistä. Ominaisuusarvot välitetään lapselle, kun javascript-menetelmä on suoritettu loppuun, jotta se kerää kaikki muuttuneet ominaisuudet ja työntää muuttuneet arvot ketjussa. Voit ymmärtää tämän, kun lokit ovat muutosten käsittelijässä dummyStr kuvan osoittamalla tavalla täällä
Voit toteuttaa sen kolmella eri tavalla:
Vaihtoehto 1: Käytä setTimeout (suositeltava)
Kuten on esitetty täällä , setTimeout-toiminnon avulla voit kutsua alimenetelmän JÄLKEEN, kun vanhempien menetelmä on suorittanut käsittelyn. SetTimeout-toiminnon käyttäminen työntää kutsun asynkroniseen säikeeseen, minkä vuoksi se suoritetaan myöhemmin synkronisen langan jälkeen.
setTimeout(()=>this.template.querySelector("c-child").run()); Vaihtoehto 2: Käytä Vaihda käsittelijä
Kuten on esitetty täällä , voit käyttää vaihtokäsittelijää lapsessa api ominaisuus, jota kutsutaan ominaisuuden muuttamisen jälkeen.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Vaihtoehto 3: Käytä menetelmäparametria
Kuten on esitetty täällä , välitä vaaditut muutetut ominaisuudet menetelmän parametreina.
this.template.querySelector("c-child").run(this.dummyStr); Kommentit
- Kiitos paljon! En tiennyt ' en tiennyt ensimmäisestä vaihtoehdosta. Luulin, että komponenttien väliset arvot lähetetään linkin kautta.
Vastaa
Kokeile tätä:
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); } } LAPSI:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Napsauttamalla Päivitä tiedot:
OUTPUT:
Kommentit
- Minä vain ajattelin, että komponenttien väliset arvot lähetetään linkin kautta. En odota tällaista käyttäytymistä