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

Question

我有以下 lit web 组件

<my-element></my-element>

在 my-element 中有一个按钮，单击时应调用父 Web 组件测试函数。

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

Answer 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