예제 참조 https://developer.salesforce.com/docs/component-library/tools/playground/q8rtcVIBf/79/edit
상위 구성 요소
<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(); } } 하위 구성 요소
export default class Child extends LightningElement { @api objMap @api dummyStr @api run() { console.log(this.dummyStr); // <---- OLD VALUE???? } } @api 값을 사용해야 할 때 부모에서 자식 메서드를 호출하는 방법은 무엇입니까?
답변
이것은 예상 된 동작입니다. 속성 값은 메서드 자바 스크립트 실행이 완료된 후 자식에게 전달되어 변경된 모든 속성을 수집하고 변경된 값을 체인 아래로 푸시합니다. 와 같이 dummyStr의 변경 핸들러에 로그를 저장하면이를 이해할 수 있습니다. 여기
div> 다음과 같은 세 가지 방법으로 구현할 수 있습니다.
옵션 1 : setTimeout 사용 (권장)
여기 , 부모 메서드가 처리를 완료 한 후 setTimeout을 사용하여 자식 메서드를 호출 할 수 있습니다. setTimeout을 사용하면 호출이 비동기 스레드로 푸시되므로 나중에 동기 스레드 후에 실행됩니다.
setTimeout(()=>this.template.querySelector("c-child").run()); 옵션 2 : 변경 핸들러 사용
여기 , 하위 api
속성이 변경된 후 호출됩니다.
@api get dummyStr() { return this._dummyStr; } set dummyStr(value) { this._dummyStr = value; console.log("dummyStr changed => ", this._dummyStr, value); this.run(); } 옵션 3 : 메서드 매개 변수 사용
여기 에서 필요한 변경된 속성을 메소드 매개 변수로 전달합니다.
this.template.querySelector("c-child").run(this.dummyStr); 댓글
- 감사합니다! 첫 번째 옵션에 대해 ' 몰랐습니다. 구성 요소 간의 값이 링크로 전송되는 것으로 생각했습니다.
답변
해보기 :
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); } } 어린이 :
import { LightningElement, track, api } from "lwc"; export default class Child extends LightningElement { @api objMap @api dummyStr @api run(dummyStr) { console.log(dummyStr); } } 데이터 업데이트를 클릭 한 후 :
출력 :
댓글
- 구성 요소 간의 값이 링크로 전송된다고 생각했습니다. 나는 그 행동을 기대하지 않는다