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>
補足
- 命名
- JSのプロパティ名はキャメルケース
- HTMLのタグ属性名はケバブケース
- 実践的な使い方
- 親コンポーネントのJSで定義した配列を、for:eachで回して子コンポーネントの公開プロパティに値をセットするのが一般的とのことです
- サンプルコード引用元
メソッドの公開方法
1.子コンポーネントのJSで公開したいメソッドに@apiデコレータをつける
例
// getter
@api
get メソッド名() {
const 返り値 = 代入値;
return 返り値;
}
@api
メソッド名() {
処理
}
2.親コンポーネントのJSにハンドルメソッドを作る
例
handle子コンポーネントのメソッド名() {
this.template.querySelector(‘c-子コンポーネントのテンプレート名’).子コンポーネントのメソッド名();
}
3.親コンポーネントのHTMLでハンドルメソッドを呼び出す
例
<button onclick={ハンドルメソッド名}>ボタン</button>
補足
- メソッドは引数を渡すこともできます
this.templateについて
-
this.templateとは- 各コンポーネントが所有する要素にアクセスできる
querySelector()について
-
querySelector()とは- 引数にマッチするDOM Elementsの配列を返却するメソッド
- 子コンポーネントにアクセスし、そのコンポーネント上のメソッドを呼び出すのに便利
- tips
- 子コンポーネントを配列のループなどで回している場合は、class や data-* などの属性を追加して目的の要素にアクセスできる
- querySelector()のようなクエリメソッドにidを渡してはいけない
- HTML テンプレートがレンダリングされるとき、id 値はグローバルに一意な値に変換される可能性があり、JSで id セレクタを使用した場合、変換された id とズレることがあるため
- docs