例を参照 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値を使用する必要があるときに親から子メソッドを呼び出す方法は？
回答
これは予想される動作です。プロパティ値は、メソッドjavascriptの実行が終了した後に子に渡されるため、変更されたすべてのプロパティが収集され、変更された値がチェーンにプッシュされます。これは、 に示すように、dummyStrの変更ハンドラーにログを記録することで理解できます。ここに
div> 3つの異なる方法で実装できます。
オプション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); コメント
- どうもありがとうございました！ '最初のオプションについて知りませんでした。コンポーネント間の値はリンクで送信されると思いました。
