Передайте функцию @Prop () в пользовательский веб-компонент в stenciljs - PullRequest
Новая
       10

Передайте функцию @Prop () в пользовательский веб-компонент в stenciljs

0 голосов
/ 28 января 2019

Как я могу передать @Prop () как функцию, которая переключает события для компонента в Stencil.js? 

@Prop() myFunction() {
         console.log("Hello World!")
         }

и поместить его в 

<my-component onClick={myFunction()}></my-component>

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Чтобы передать функцию вашему компоненту, вы просто передадите ссылку на функцию.В вашем примере, если вы выставили myFunction Prop, то все, что вам нужно сделать в родительской функции рендера, это передать функцию.Например: 

// parent render function
render() { 
  const funcReference = () => { console.log('click') };
  return (<my-component myFunction={funcReference}></my-component>);
}

В MyComponent вы подключите функцию к обработчику onClick элемента, который должен запустить функцию.Например: 

// MyComponent render function
render() {
  return (<div>
            <button onClick={this.myFunction}>Click Me!</button>
          </div>);
}

Как объяснялось в предыдущем ответе, если вы хотите уведомить родительский компонент о щелчке, то вы будете использовать EventEmitter в дочернем компоненте и функцию @Listen народитель.

0 голосов
/ 29 января 2019

Это неправильный способ обработки событий в вашем веб-компоненте.Чтобы обработать событие onClick на вашем веб-компоненте, вы должны реализовать прослушиватель щелчков внутри вашего компонента, украсив его с помощью @Listen decorator.

https://stenciljs.com/docs/events Events - Stencil 

@Listen('click')
onClickHandler(event) {
// Do something
}

В случае, если вы хотите, чтобы ваш пользователь написал код для того, что должно происходить при щелчке вашего компонента, вам нужно передать событие click из вашего компонента, и пользователь должен реализовать прослушиватель для этого

https://stenciljs.com/docs/events События - Трафарет

...