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

Question

我正在使用 polymer LitElement，我试图将一个函数传递给 props 但没有用，这是我发现的工作方式，但它太糟糕了......有更好的建议吗？

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 data bindings 设置一个属性，这意味着它必须将值转换为字符串。

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

Answer 2

@abraham 的回答适用于一般情况：您可以使用 . 语法设置属性，包括函数。

但是，如果您专门处理事件，那么我会使用事件绑定（@ 语法）并确保您感兴趣的事件是冒泡的和组合的（如 click is) 这样它就会传播出子组件，或者由子组件重新调度。事件是一个很好的模型，我会将它们用于类似事件的事情。

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

Is there any better way to pass function to props with LitElement?

polymer

lit-element