如何将函数作为属性传递给 lit 元素？答案

【问题标题】：How to pass a function as a property to lit element?如何将函数作为属性传递给 lit 元素？
【发布时间】：2022-07-28 03:19:33
【问题描述】：

我有以下点亮的网络组件

<my-element></my-element>

my-element 内部是一个按钮，点击时应该调用父 Web 组件测试函数。

如何使用发光元素做到这一点？

【问题讨论】：

标签： lit-element

【解决方案1】：

这可以通过使用Property Expressions 直接在my-element 上设置属性来完成。

例如，在下面的代码块中。 my-element 有一个属性 onPress。 parent-el可以通过设置.onPress=${/* Function */}直接设置属性。

这是可以放在父元素中的以下声明的替代方案：

this.shadowRoot.querySelector('my-element').onPress = () => console.log('pressed');

完整示例：

@customElement('parent-el')
export class ParentEl extends LitElement {
  render() {
    return html`<my-element
      .onPress=${() => console.log('called')
    }></my-element>`;
  }
}


@customElement('my-element')
export class MyEl extends LitElement {
  @property()
  onPress = () => {};
  
  render () {
    return html`<button @click="${this.onPress}">Call passed function</button>`;
  }
}

还有活生生的例子：https://lit.dev/playground/#gist=5da1cb16373f7fca9c8a7cbdc5a22e4a

【讨论】：