子コンポーネント側で変換やチェック処理がいらないなら 親から受け取ったのをそのままリスナに設定してる
こういう感じ
import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module"
customElements.define("elem-1", class extends LitElement {
onClickButton = () => {
console.log("CLICKED")
}
render() {
return html`
<elem-2 .onClickButton=${this.onClickButton}></elem-2>
`
}
})
customElements.define("elem-2", class extends LitElement {
static properties = {
onClickButton: { type: Function },
}
render() {
return html`
<button @click=${this.onClickButton}>button</button>
`
}
})
document.body.append(document.createElement("elem-1"))
最初に受け取ったときや変更されたときに render 処理が必要だから properties で定義が必要
リスナ用の受け取る関数の変更で rerender をさせたくないので リスナにはコンポーネント内のメソッドを設定するといいのかも
受け取る関数は properties 定義してないただのプロパティとして受け取る
import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module"
customElements.define("elem-1", class extends LitElement {
onClickButton = () => {
console.log("CLICKED")
}
render() {
return html`
<elem-2 .onClickButton=${this.onClickButton}></elem-2>
`
}
})
customElements.define("elem-2", class extends LitElement {
_onClickButton = (eve) => {
this.onClickButton(eve)
}
render() {
return html`
<button @click=${this._onClickButton}>button</button>
`
}
})
document.body.append(document.createElement("elem-1"))
properties に定義いらないし rerender を減らせる
だけど lit-element だと React の関数コンポーネントと違って毎回リスナ関数を作り直さない
親側で動的に関数を作ったりしてない限りは変更がないので 初回以外に rerender が発生しないことが多そう
個人的には properties は減らしたいけど どっちもどっちなのかも