Передача функции дочернему

Код довольно прост: я пытаюсь передать функцию addContactFn() из MainComp в SideMenu. При нажатии получаю ошибку

Uncaught 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>`
    }

}

lit-element polymer-3.x
person alfredopacino    schedule 04.08.2019    source источник
comment
Значения атрибутов всегда являются строками: lit-html.polymer-project.org/guide/   -  person Thad    schedule 04.08.2019
comment
этот код взят из курса Udemy Polymer..   -  person alfredopacino    schedule 04.08.2019

Ответы (1)


arrow_upward
5
arrow_downward

Как сказал Тад, атрибуты всегда являются строками, и не существует действительно безопасного и эффективного способа разбора функции в процессе выполнения.

Однако вам даже не нужно использовать это, просто передайте функцию как свойство, а не как атрибут, и этого должно быть достаточно, вот как рендеринг MainComp будет в конечном итоге после этого

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

По сути, вы просто добавляете точку перед именем свойства.

Для получения дополнительной информации см. руководство LitElement.

Опять же, этот способ делать вещи очень похож на React и не рекомендуется для веб-компонентов, вам, вероятно, следует просто создать генерируемое пользовательское событие в дочернем компоненте и подобрать его в родительском.

person Alan Dávalos    schedule 05.08.2019
comment
Спасибо. Оно работает! есть ли реальная разница между свойствами и атрибутами? - person alfredopacino; 05.08.2019
comment
@alfredopacino Атрибуты задаются в html, и они могут быть только строками, свойства являются частью объекта js, поэтому они могут быть практически любыми, что делает геттер статических свойств litelement, так это создает для вас сопоставление между атрибутами и свойствами, чтобы обработка синхронизации между обоими проще - person Alan Dávalos; 06.08.2019