在模板中的自定义 Web 组件中传递 @Prop() 函数

Question

如何将 @Prop（） 作为切换模板中组件事件的函数传递.js ？

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

并将其放入

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

Answer 1

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

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

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

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

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

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 函数。