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

Question

如何将 @Prop() 作为函数传递给 Stencil.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 函数。

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

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

javascript

stenciljs