se eksempel https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Overordnet 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(); } } Underordnet komponent
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Hvordan kaller jeg barnemetoden fra foreldre når du trenger å bruke @api-verdier?
Svar
Dette er forventet oppførsel. Egenskapsverdiene vil bli overført til underordnet etter at metoden javascript er ferdig kjørt, slik at den samler alle de endrede egenskapene og skyver de endrede verdiene ned i kjeden. Du kan forstå dette ved å ha loggene i endringsbehandleren til dummyStr som vist her
Du kan implementere det på 3 forskjellige måter:
Alternativ 1: Bruk setTimeout (foretrukket)
Som vist her , du kan bruke setTimeout til å påkalle underordnet metode NÅR den overordnede metoden er ferdig med behandlingen. Bruk av setTimeout vil presse påkallingen til asynkron tråd, på grunn av hvilken den kjøres senere etter synkron tråd. > Alternativ 2: Bruk Change handler
Som vist her , du kan bruke endringsbehandler i underordnet api eiendom som vil bli påkalt etter at eiendommen er endret.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Alternativ 3: Bruk metodeparameter
Som vist her , send de endrede egenskapene som metodeparametere.
this.template.querySelector("c-child").run(this.dummyStr); Kommentarer
- Tusen takk! Jeg visste ikke ' om det første alternativet. Jeg trodde at verdiene mellom komponentene sendes via lenke.
Svar
Prøv dette:
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); } } Etter å ha klikket på «Oppdater data»:
UTGANG:
Kommentarer
- Jeg bare trodde at verdier mellom komponenter sendes via lenke. Jeg forventer ikke atferd