👶

【Lightning Web Component】親コンポーネントから子コンポーネントのメソッドを実行する方法

2023/01/02に公開約900字

今回はタイトルにも書いたように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'が表示されるはずです。

参考サイト

https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/handle-events-in-lightning-web-components

Discussion

ログインするとコメントできます