👶
【Lightning Web Component】親コンポーネントから子コンポーネントのメソッドを実行する方法
今回はタイトルにも書いたようにLightning Web Componentにて親コンポーネントから子コンポーネントのメソッドを実行する方法について紹介していきます。
実装
下記のようなコンポーネントに子コンポーネントを含んでいると想定します。
<template>
<c-child-component></c-child-component>
</temlate>
childComponentには次のようなメソッドが存在しているとします。親で使用したいメソッドについてはデコレータ"api"をつけることを忘れないでください。
import { LightningElement, api } from'lwc';
export default class ChildComponent extends LightningElement {
@api
hello() {
console.log('hello');
}
}
そして親であるparentComponentでは下記のように記述することで子コンポーネントのメソッドを実行することができます。
import { LightningElement } from'lwc';
export default class parentComponent extends LightningElement {
handleChildMethod() {
this.template.querySelector('c-child-component').hello();
}
}
こうすることで親側でメソッドを実行したとしてもコンソールに'hello'が表示されるはずです。
参考サイト
Discussion