lwcのプロパティ公開

lwcで複数コンポーネントを連携する際の、プロパティ公開について書きます。

変数の公開方法

1.子コンポーネントのJSで公開したい変数に@apiデコレータをつける
例

import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName;
}

2.親コンポーネントのHTMLで値をセットする

例

<template>
    <c-todo-item item-name="Milk"></c-todo-item>
    <c-todo-item item-name="Bread"></c-todo-item>
</template>

1.子コンポーネントのJSで公開したいメソッドに@apiデコレータをつける
例

　// getter
    @api
    get メソッド名() {
        const 返り値 = 代入値;
        return 返り値;
    }

    @api
    メソッド名() {
　　　       処理
    }

2.親コンポーネントのJSにハンドルメソッドを作る

例

    handle子コンポーネントのメソッド名() {
        this.template.querySelector(‘c-子コンポーネントのテンプレート名’).子コンポーネントのメソッド名();
    }

3.親コンポーネントのHTMLでハンドルメソッドを呼び出す

例

<button onclick={ハンドルメソッド名}>ボタン</button>

querySelector()とは
- 引数にマッチするDOM Elementsの配列を返却するメソッド
- 子コンポーネントにアクセスし、そのコンポーネント上のメソッドを呼び出すのに便利
tips
- 子コンポーネントを配列のループなどで回している場合は、class や data-* などの属性を追加して目的の要素にアクセスできる
- querySelector()のようなクエリメソッドにidを渡してはいけない
  - HTML テンプレートがレンダリングされるとき、id 値はグローバルに一意な値に変換される可能性があり、JSで id セレクタを使用した場合、変換された id とズレることがあるため
docs
- Element.querySelector() - Web APIs | MDN
- Element.querySelectorAll() - Web APIs | MDN