javascript - Pass @Prop() function in custom web component in stenciljs

Question

How Can I pass @Prop() as function that toggle events for the component in Stencil.js ?

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

and place it in

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

Answer 1

这不是处理 Web 组件中事件的正确方法。为了处理 Web 组件上的 onClick 事件，您必须在组件中实现一个单击侦听器，方法是使用 @Listen 装饰器对其进行装饰。

https://stenciljs.com/docs/events 事件 - Stencil

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

如果您希望您的用户为单击组件时应该发生的事情编写代码，您需要从组件发出 click 事件，并且用户应该为此实现一个侦听器

https://stenciljs.com/docs/events 事件 - Stencil

Answer 2

为了将函数传递给您的组件，您只需传递函数引用。在您的示例中，如果您公开了一个 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 函数。