有没有更好的方法使用 LitElement 将函数传递给道具？

Question

我正在使用聚合物 LitElement，我试图将一个函数传递给道具，但没有奏效，这是我发现的工作方式，但它很糟糕......还有更好的建议吗？

import { LitElement, html, customElement, property } from 'lit-element';

@customElement('my-element')
export class MyElement extends LitElement {


onButtonClick = function name (){

  console.log("Clicked!!")
}

  render() {
    return html`

      <c-button text="Button Name" onClick="${this.onButtonClick}" />
    `;
  }
}

@customElement("c-button")
export class CButton extends LitElement{

  @property() text;
  @property() onClick;

  handleClick(){
    let fct = eval(`( ${this.onClick} )` )
    fct();
  }

  render(){
    return html`

      <button @click="${this.handleClick}" > ${this.text} </button> 
    `
  }
}

Answer 1

默认情况下，lit-html数据绑定设置了一个属性，这意味着它必须将值转换为字符串。

而不是像这样onClick="${this.onButtonClick}"前缀它。这将在 JavaScript 中设置一个属性，并且该方法将通过引用传递。..onClick="${this.onButtonClick}"