LWC-metode til bedste praksis for opkaldsunderord

Dette er forventet adfærd. Egenskabsværdierne videregives til underordnet, efter at metoden javascript er kørt, så det samler alle de ændrede egenskaber og skubber de ændrede værdier ned i kæden. Du kan forstå dette ved at have logfilerne i ændringshåndteringen af dummyStr som vist her

Du kan implementere det på 3 forskellige måder:

Mulighed 1: Brug setTimeout (foretrukket)

Som vist her , du kan bruge setTimeout til at påkalde underordnet metode, EFTER den overordnede metode er færdig med behandlingen. Brug af setTimeout vil skubbe påkaldelsen til asynkron tråd, hvorfor den kører senere efter synkron tråd.

setTimeout(()=>this.template.querySelector("c-child").run()); 

Valgmulighed 2: Brug Change handler

Som vist her , du kan bruge ændringshåndterer i underordnet api egenskab, der påkaldes, efter at ejendommen er ændret.

@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } 

Mulighed 3: Brug metodeparameter

Som vist her , send de krævede ændrede egenskaber som metodeparametre.

this.template.querySelector("c-child").run(this.dummyStr); 

Kommentarer

• Mange tak! Jeg vidste ikke ' om den første mulighed. Jeg troede, at værdier mellem komponenter sendes via link.

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); } } 

BØRN:

import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } 

Efter at have klikket på “Opdater data”:

OUTPUT:

Legepladslink

Kommentarer

• Jeg bare troede, at værdier mellem komponenter sendes via link. Jeg forventer ikke den adfærd