vedi esempio https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Componente principale
<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(); } } Componente secondario
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } Come chiamare il metodo figlio dal genitore quando è necessario utilizzare i valori @api?
Risposta
Questo è il comportamento previsto. I valori delle proprietà verranno trasmessi al figlio dopo che il metodo javascript ha terminato lesecuzione in modo che raccolga tutte le proprietà modificate e spinga i valori modificati lungo la catena. Puoi capirlo disponendo dei log nel gestore delle modifiche di dummyStr come mostrato qui
Puoi implementarlo in 3 modi diversi:
Opzione 1: utilizza setTimeout (preferito)
Come mostrato qui , puoi usare setTimeout per richiamare il metodo figlio DOPO che il metodo genitore ha completato lelaborazione. Lutilizzo di setTimeout invierà linvocazione al thread asincrono a causa del quale verrà eseguito in seguito dopo il thread sincrono.
setTimeout(()=>this.template.querySelector("c-child").run()); Opzione 2: utilizza il gestore delle modifiche
Come mostrato qui , puoi utilizzare il gestore delle modifiche nel api proprietà che verrà richiamata dopo la modifica della proprietà.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Opzione 3: utilizza il parametro del metodo
Come mostrato qui , passare le proprietà modificate richieste come parametri del metodo.
this.template.querySelector("c-child").run(this.dummyStr); Commenti
- Grazie mille! Non ' non sapevo della prima opzione. Pensavo che i valori tra i componenti fossero inviati tramite link.
Risposta
Prova questo:
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); } } BAMBINO:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Dopo aver fatto clic su “Aggiorna dati”:
OUTPUT:
Commenti
- Ho appena pensato che i valori tra i componenti inviati tramite link. Non mi aspetto quel comportamento