Question

代码非常简单：我试图将功能addContactFn()从MainComp传递到SideMenu。点击后，我收到错误

未捕获的TypeError：this.value.handleEvent不是函数

class MainComp extends LitElement {
    constructor(){
        super()
        this.addContactFn = this.addContactFn.bind(this)
    }
    addContactFn() {
        console.log("clicked");
    }
    render(){
        return html`
<div class="main-page">
   <side-menu addContactFn="${this.addContactFn}"></side-menu>
</div>
`
    }

}


class SideMenu extends LitElement {
    constructor(){
        super()
    }
    static get properties(){
        return {
            addContactFn: Function
        }
    }
    render(){
        return html`<a @click="${this.addContactFn}">Add contact</a>`
    }

}

Answer 1

正如Thad所说，属性始终是字符串，并且没有真正安全有效的方式来解析执行中的函数

但是，您甚至根本不需要使用它，只需将函数作为属性而不是作为属性传递就足够了，这就是MainComp的渲染在此之后结束的方式

render(){
  return html`
    <div class="main-page">
     <side-menu .addContactFn="${this.addContactFn}"></side-menu>
    </div>
    `;
}

基本上，您只需在属性名称之前添加一个点

有关更多信息，请检查LitElement's guide

再说一次，这种处理方式非常像React，并且不建议Web组件真正使用，您可能应该只在子组件中创建一个发出自定义事件，然后在父组件中进行拾取

将功能传递给孩子

1 个答案: