在stenciljs中的自定义Web组件中传递@Prop（）函数

Question

如何通过@Prop（）作为触发Stencil.js中组件事件的函数？

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

并将其放入

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

Answer 1

为了将函数传递给您的组件，您只需传递函数引用。在您的示例中，如果公开了myFunction Prop，那么父渲染函数要做的就是传递该函数。例如：

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

在MyComponent中，您会将函数连接到应运行该函数的元素的onClick处理程序。例如：

{{1}}

如前一个答案所述，如果您想通知父组件单击，则将在子组件中使用EventEmitter，在父组件上使用@Listen函数。

Answer 2

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

https://stenciljs.com/docs/events 活动-模具

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

如果您希望用户编写有关单击组件时应发生的事件的代码，则需要从组件中发出click事件，并且用户应为此实现监听器

https://stenciljs.com/docs/events 活动-模具