将函数传递给孩子

Question

代码非常简单：我尝试将函数addContactFn()从MainCompto传递给SideMenu。单击时出现错误

未捕获的类型错误：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 的指南

再说一次，这种做事的方式非常 React，并不真正推荐用于 Web 组件，您可能应该只在子组件中创建一个发出自定义事件并在父组件中拾取它