将函数传递给 child

Question

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

Uncaught TypeError: this.value.handleEvent is not a function

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 组件，您可能应该只在子组件中创建一个自定义事件并在父组件中获取它

将函数传递给 child

Passing a function to a child

polymer-3.x

lit-element