ver ejemplo https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
Componente principal
<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 secundario
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } ¿Cómo llamar al método hijo del padre cuando es necesario usar valores @api?
Respuesta
Este es el comportamiento esperado. Los valores de las propiedades se transmitirán al niño después de que el método javascript termine de ejecutarse para que recopile todas las propiedades modificadas y empuje los valores modificados hacia abajo en la cadena. Puede comprender esto si tiene los registros en el controlador de cambios de dummyStr como se muestra aquí
Puede implementarlo de 3 formas diferentes:
Opción 1: Use setTimeout (preferido)
Como se muestra aquí , puede usar setTimeout para invocar el método secundario DESPUÉS de que el método principal complete el procesamiento. El uso de setTimeout empujará la invocación al hilo asíncrono por lo que se ejecutará más tarde después del hilo sincrónico.
setTimeout(()=>this.template.querySelector("c-child").run()); Opción 2: Utilice el controlador de cambios
Como se muestra aquí , puede usar el controlador de cambios en el api propiedad que se invocará después de que se cambie la propiedad.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } Opción 3: Utilice el parámetro de método
Como se muestra aquí , pase las propiedades cambiadas requeridas como parámetros de método.
this.template.querySelector("c-child").run(this.dummyStr); Comentarios
- ¡Muchas gracias! No ' no sabía acerca de la primera opción. Pensé que los valores entre los componentes se envían por enlace.
Respuesta
Prueba esto:
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); } } NIÑO:
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } Después de hacer clic en «Actualizar datos»:
SALIDA:
Comentarios
- Acabo de Pensé que los valores entre componentes se envían por enlace. No espero ese comportamiento